I am using the single page template to build my mobile app. I have a form page that
i have gotten form validation and ajax "working", however the form has an odd problem.
After passing validation, it will only return an ajax response from the server after
hitting the submit button TWICE. Thus, nothing happens the FIRST time the
submit button is pressed.
It has taken me quite a number of days to get to this stage, I would appreciate some
help. Thanks. Here is my code...
======================================================
<body>
<!-- call ajax page -->
<div data-role="page" id="genericPage">
<script>
function onSuccess(data, status) {
data = $.trim(data);
// display server response
$("#notification").popup().text(data);
$("#notification").popup("open");
}
function onError(data, status) {
data = $.trim(data);
//display server error message
$("#notification").popup().text(data);
$("#notification").popup("open");
}
</script>
<script>
$(document).ready(function() {
$("#genericForm").validate({
submitHandler: function(form) {
$("form").submit(function() {
var formData = $("#genericForm").serialize();
$.ajax({
type: "POST",
url: "ajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
});
}
});
});
</script>
<div data-role="content">
<form id="genericForm">
<div id="notification" data-role="popup" data-theme="e" data-overlay-theme="a" class="ui-content">
</div>
<div data-role="fieldcontain">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" class="required" value="" />
</div>
<div data-role="fieldcontain">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" class="required" value="" />
</div>
<button data-theme="b" id="submit" type="submit">Submit</button><br><br>
</form>
</div><!-- content -->
</body>