I'm using the jquery form plugin from a form which is retrieved via
ajax. I have multiple forms on the page.
I'm using .livequery to make sure the form is only requested once, but
didn't realize my problem is that the submit is actually occuring more
than once.
I've tried adding .livequery to the begging of the .submit function so
that it would hopefully only be triggered once, but that hasn't worked
for me.
I would prefer to not do an 'unbind/bind' function because with
cancelling of the form, etc. it gets a bit complicated.
Is there a simple way to do this?
Here is the code I have to call the form and then to submit it. This
code includes my attempt to use livequery in this, but the form still
submits multiple times.
[code]
$(".addGroup").livequery('click', function(event) {
id = this.id;
var posTop = event.pageY;
var posLeft = event.pageX;
var formID = "#createForm";
$.ajax({
type: "GET",
url: "processes/addType.php",
data: "gid="+id,
success: function(response){
$(formID).css({ position: 'absolute',
top: posTop, left:
posLeft });
$(formID).fadeIn("slow").html(response);
$("#createForm").livequery('click',
function(){
addShiftAJAX();
});
cancelForm(formID);
templateShifts();
}
});
});
// prepare the form when the DOM is ready
function addAJAX(){
var options = {
target: '#createForm', // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('#createForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest(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];
alert('About to submit: \n\n' + queryString);
// 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: "GET",
url: "processes/getGroups.php",
data: "cid="+cid,
success: function(response2){
$(".groups").html(response2);
$("#createForm").fadeOut("slow");
}
});
};
};
[/code]
