I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.
Related
I have a file, which needs to have 90 modals with lots of long texts, because I need to create a modal when a link is clicked.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="inc/bootstrap.css" rel="stylesheet">
<script src="inc/jquery.min.js"></script>
<script src="inc/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function(){
$('a').click(function(){
var link = $('#name').html(); // I need sent this to my calculator file
$.ajax({
url : "result.php",
type : "post",
dataType:"text",
data : {
name: link
},
success : function (a){
$('#result').html(a);
}
});
});
});
</script>
<div id="result"></div>
I need this text for php script
</body>
</html>
resuilt.php
/* I used PHP becase i need more functions, this only a example how
* to creat and call a modal after click on a link.
*/
function create_modal($modal_ID = 'myModal')
{
return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button>
<h4 class='modal-title' id='myModalLabel'>Nhãn</h4>
</div>
<div class='modal-body'>
Nội dung
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>";
}
echo create_modal();
?>
The result is, I need to click on the link two times to show my modal. But it can't close or does anything.
Where did it go wrong? And is there any way to make my idea better?
you can add
success : function (a){
$('#result').html(a);
$('#myModal').modal('show');
}
just add $('#myModal').modal('show'); when ajax load your modal in #result
I don't think 90 modals is a good idea.
Try saving data maybe in a databas.
Assign your links different ids.
Use jquery to listen to click events
Get data from your server
Populate modal with values from the server.
Check this stack overflow link.
Let me know if you need help
I would like to show or hide elements of my kendo template based on whether or not a field in my model has changed or not.
First attempt:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne.dirty"/>
Attempt two is to have a 'schedulerEventFieldOneOrigValue' field added to my model, then doing this:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne != schedulerEventFieldOneOrigValue"/>
But this gives me an error stating that schedulerEventFieldOne is not defined. It seems that it doesn't like the equality test. Which is odd since, using a < o r > test seems to work fine: "visible: schedulerEventFieldOne > 0"
Is there a way to accomplish my task using the kendo binding? Or will I have to resort to jQuery again?
You do not state any concern, so why dont you do it on the view model with the second approach? It's possible to do this i believe :
$(document).ready(function() {
var vm = kendo.observable({
form: {
country: ""
},
original: {
country: ""
},
isDisabled: function() {
return this.get("form.country") != this.get("original.country");
},
save: function() {
}
})
kendo.bind($("#test"), vm);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<input type="text" data-bind="value: form.country" />
<button data-bind="click:save, visible:isDisabled">Save</button>
</div>
</body>
</html>
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">
I have a problem redirecting a page with javascript. I want to redirect the page after clicking a button, but it is redirecting it automatically.
Why is that?
window.onload=initAll;
function initAll(){
if(window.addEventListener) {
document.getElementById('check').addEventListener("click",redirection,false);
} else if (window.attachEvent){
document.getElementById('check').attachEvent("onclick", redirection);
}
function redirection(){
window.location.href='http://www.google.com';
}
}
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="glavna.js"></script>
</head>
<body>
<div id="wrapper">
<form action="glavna.html">City:<input id="city" type="text"/>
Price: From:<input type="text" id="from"/> To:<input type="text" id="to"/>
Refresh in min :<input type="text" id="refresh"/>
<button id="check" >Search</button>
</form>
</div>
</body>
</html>
this can be done with window.location.href what it does
// similar behavior as clicking on a link
window.location.href = "you want to redirect";
window.location is location object. To redirect Use window.location.href instead