[jQuery] mixing form plugin with validate plugin on ajax retrieved form
Lots going on here, and the code is really close to working, but I'm
not sure which direction to take.
I have a form which loads via ajax. I then submit the form using the
form plugin.
No problems here.
I've just added the validation plugin, and got it to work right away
with the following code. Except that the 'validate' only works once.
Clicking submit a second time will submit the form.
[code]
$(".add").livequery('click', function(event) {
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
var formID = "#addForm";
$.ajax({
type: "POST",
url: "add.php",
data: "cid="+cid,
success: function(response){
$(formID).css({ position: 'absolute', top: posTop, left:
posLeft });
$(formID).fadeIn("slow").html(response);
$(formID).validate();
addAJAX();
cancelForm(formID);
}
});
});
function addAJAX(){
var options2={
target: '#addForm', // target element(s) to be updated
with server response
beforeSubmit: showRequest2,
success: showResponse
}
// bind to the form's submit event
$("#addForm").submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxForm(options2);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest2(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);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
$("#addForm").html('<form class="addEmpForm"><img src="images/ajax-
loading.gif"></form>');
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: "POST",
url: "processes/get.php",
data: "cid="+cid,
success: function(response){
$(".addResponse").html(response);
$("#addForm").fadeOut("slow");
}
});
};
};
[/code]
I then tried putting the validation into the form plugin function.
This prevents the form from being submitted, but for some reason the
form plugin response $.ajax is not triggered.
The form is submitted, but the response is not recieved. The
'loading.gif' runs.
[code]
$(".addEmp").livequery('click', function(event) {
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
var formID = "#addEmpForm";
$.ajax({
type: "POST",
url: "addEmp.php",
data: "cid="+cid,
success: function(response){
$(formID).css({ position: 'absolute', top: posTop, left:
posLeft });
$(formID).fadeIn("slow").html(response);
addEmpAJAX();
cancelForm(formID);
}
});
});
// prepare the form when the DOM is ready
function addEmpAJAX(){
var options2={
target: '#addEmpForm', // target element(s) to be updated
with server response
beforeSubmit: showRequest2,
success: showResponse
}
// bind to the form's submit event
$('#addEmpForm').validate({
submitHandler: function(form){
$("#addEmpForm").submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxForm(options2);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
})
}
});
// pre-submit callback
function showRequest2(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);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
$("#addEmpForm").replaceWith('<form class="addEmpForm"><img
src="images/ajax-loading.gif"></form>');
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: "POST",
url: "processes/getEmployees.php",
data: "cid="+cid,
success: function(response){
$(".employees").html(response);
$("#addEmpForm").fadeOut("slow");
}
});
};
};
[/code]
I'm not sure which of the two is a better route to follow.
Any ideas?