I am using the live query plugin of jQuery to attach dynamic behavior to form elements and create ajax forms. The problem i am facing is as follows:
in the response to submit if I do not call livequery again on the elements, then the newly loaded form does not get the required behavior. However if I call livequery with submit again, then the form is submitted more than once.
Actually the count increases everytime. I tried using expire. But that does not help at all. Any comments as to how this can be achieved.
What I am trying to do is to create all forms with class js-ajax-form as a form which is submitted thru ajax. The resulting content is also a form which should retain the same behavior. That is it must be submitted thru ajax.
Would appreciate your guidance.
$.fn.fajaxform = function() {
var container = null;
$(this).livequery(
'submit',
function(e) {
var $this = $(this);
container = $this.parent();
$this.ajaxSubmit({
beforeSubmit : function(formData, jqForm, options) {
$('input:file', jqForm[0]).each(function(i) {
if ($('input:file', jqForm[0]).eq(i).val()) {
options['extraData'] = {
'is_iframe_submit' : 1
};
}
});
container.block({
message : '<h1><img src="/img/busy.gif" /> Loading please wait...</h1>'
});
},
success : function(responseText, statusText) {
redirect = responseText.split('*');
if (redirect[0] == 'redirect') {
location.href = redirect[1];
} else if ($this.metadata().container) {
$('.' + $this.metadata().container).html(
responseText);
} else {
$this.parents('div.js-responses').eq(0).html(
responseText);
}
$('.js-ajax-form').each(
function()
{
if (this.expire)
{
this.expire();
}
}
);
$('.js-ajax-form').fajaxform();
container.unblock();
}
});
return false;
});
};
