This is a bit strange as it happens on only one form on my site which
uses many forms with the form plugin.
The form appears on the page via an ajax call (like most of my forms),
and when the user submits the form it is submitted and the response
returned via ajax call.
When the user clicks submit the first time, nothing happens. If you
click again, the form gets submitted.
When I have validate attached to the form, it takes three clicks to
get the form to submit.
As far as I can tell, this form is no different from any other forms
on my site.
Anyone seen this kind of behavior before?
I've included the validate code commented out as the issue occurs with
the code as well as without.
[code]
$(".addEmp").livequery('click', function(event) {
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
var formID = "#addEmpForm";
$(formID).css({ position: 'absolute', top: posTop, left:
posLeft });
$(formID).fadeIn("slow").html(loading);
$.ajax({
type: "POST",
url: "addEmp.php",
data: "cid="+cid,
success: function(response){
$(formID).html(response);
addEmpAJAX();
// $(formID).validate();
cancelForm(formID);
}
});
});
function addEmpAJAX(){
var options2={
target: '#addEmpForm', // target element(s) to be updated
with server response
beforeSubmit: showRequestAddEmp,
success: showResponseAddEmp
}
// $('#addEmpForm').validate({
// submitHandler: function(form){
$("#addEmpForm").submit(function() {
$(this).ajaxForm(options2);
return false;
// })
// }
});
function showRequestAddEmp(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
$("#addEmpForm").html(loading);
}
function showResponseAddEmp(options) {
$.ajax({
type: "POST",
url: "processes/getEmployees.php",
data: "cid="+cid,
success: function(response){
$(".employees").html(response);
$("#addEmpForm").fadeOut("slow");
}
});
};
};
[/ code]
