JQuery ajax form submit - how to provide dynamically loaded form action
I have a problem with dynamically loaded forms - instead of using the action attribute of the newly loaded form, my jquery code still uses the action attribute for the first loaded form. I have the following code:
//generic ajax form handler - calls next page load on success
$('input.next:not(#eligibility)').live("click", function(){
$(".form_container form").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: $(this).attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
}
});
});
But when the next form loads, the above code doesn't get the new action attribute. I tried adding the above code to my postback on successful ajax load (shown below), but it doesn't make any difference.
Can anyone please help? Many thanks
function ajaxFormStage(url)
{
var $data = $('#main_body #content');
$.validationEngine.closePrompt('body'); //close any validation messages
$data.fadeOut('fast', function(){
$data.load(url, function(){
$data.animate({
opacity: 'show'
}, 'fast');
');
//generic ajax form handler - calls next page load on success
$('input.next:not(#eligibility)').live("click", function(){
$(".form_container form").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: $(this).attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
}
});
});
});
});
+2
a source to share
1 answer
I believe this is happening because using $(this)
in this line
ajaxSubmitFile: $(this).attr('action')
you always get the action of the first form.
I think you need another selector to get the shape that is closest to the input that was pressed.
I hope you understand what I mean:]
+2
a source to share