JQuery Form plugin - how to make ajaxForm () "live"?

Question

So, I turn the "edit" form into ajaxForm with the following:

$('#reviewForm').ajaxForm({ success: function (response) { $('#bookReview').html(response); } }); 

Returns the same form that can be edited again if necessary. However, the presentation of the second form is no longer tied to it by ajaxForm (), which makes sense.

How can I make sure that this form is always ajaxForm, no matter how many views have been executed, similar to how the live () function works?

Answer 1

You can either include the ajaxForm call in the response, for example:

 <!-- the html for the form --> <script type="text/javascript"> $('#reviewForm').ajaxForm(); </script> 

or you can do this as part of the success function:

 function ajaxify(response, status, xhr, form){ var review = $('#bookReview').html(response); $('form#reviewForm', review).ajaxForm({ 'success': ajaxify }); } $('#reviewForm').ajaxForm({ 'success': ajaxify }); 

I recommend the latter.

Answer 2

 $('#myFormId').live('submit', function() { // submit the form $(this).ajaxSubmit(); // return false to prevent normal browser submit and page navigation return false; }); 

Too modified example for ajaxSubmit from http://jquery.malsup.com/form/#api .

Answer 3

From the documentation:

Delegation

true to enable event delegation support, jQuery v1.7 + is required

 // prepare all existing and future forms for ajax submission $('form').ajaxForm({ delegation: true }); 

Answer 4

try it

 $('#reviewForm').live('submit', function() { $(this).ajaxSubmit({ success:function(){ $('#bookReview').html(response); }, resetForm:true }); return false; });