How to make AjaxForm work with several forms loaded using jquery load()?

Question

Hi there

I have a page with a div that is dynamically filled using a paginator ;-) At page init I load the first 10 forms in it using jquery .load() method.

What I'd like to do is to make all the forms dynamically updatable using AjaxForm plugin. I know about server side, let's call it update.asp. It works.

But there are several questions:

1. How to make plugin work in the first place as the AjaxForm seems not to work to the firms inside a dynamically loaded div?

2. How do I ID and name the forms? Now I used ID and name myForm to all of them (maybe that is why it doesn't work). Because if I use name myForm1, myForm2 etc... I have to write 10 ajaxForm functions that I use:

        $('#myForm').ajaxForm({
          beforeSubmit: showLoader,
          success: hideLoader
    }); 
   

I would then need to make this 10 times using myForm1 to myForm10? There must be another way...

1. How do I make AjaxForm work with the pages that are not loaded yet? I think this is the same problem as 1). Because even page 1 is loaded dynamically somehow the ajaxForm doesn't get bind to the form.

Sorry, I am quite new to jquery, I am trying hard to study it, I tried this quite some time before I wrote here. If you can help me, I'd be very gratefull.

Yours

Jerry

EDIT: Here is my loader now... It is not working OK, as the loader is never shown, it dissapears so fast I can see it only if I put alert in the hideLoader :-(((

      function load(num){
      showLoader2();
      var link='/obdelaneslike.asp?ID=<%=request.QueryString("IDRecept") %>&offset='+ num
       $('#content').load(link, function(){
        hideLoader2();
        $('.ajax-loader').hide();

         $('.myForm').bind("submit", function(event) { 
                   $(this).ajaxForm({

               beforeSubmit: showLoader($(this).find('img.ajax-loader').attr('id')),
           success: hideLoader($(this).find('img.ajax-loader').attr('id'))

           }); 
           return false;
                  }); 

           });

       }

Answer 1

ID values are unique to a single DOM element. So you'd need to give each form a new ID, so if you had three forms, you could name them like so:

<form name="formone" id="formone"...
<form name="formtwo" id="formtwo"...
<form name="formthree" id="formthree"...

Now you'd create instances of your ajax request like so:

     $('#formone, #formtwo, #formthree').ajaxForm({
       beforeSubmit: showLoader,
       success: hideLoader
     }); 

Answer 2

I'll try and address these one at a time to better match the question:

1) You can re-bind when you .load() (or whatever jQuery ajax method you're using) or use a plugin like livequery(), for example here's re-binding (do this in your success handler):

$("#myDynamicDiv .myForm").ajaxForm({ ...options... }); 

Or using livequery():

$(".myForm").livequery(function() { $(this).ajaxForm({ ...options... }); });

2) Use a class instead of IDs here, like this: class="myForm", whenever you want to handle batches of elements like this class is a pretty safe route. The examples above work with class and not IDs per form (they can have IDs, they're just not used). Your form tags would look like this:

<form class="myForm">

3) The same solutions in answer #1 account for this :)