I have a page with multiple forms that I submit via Ajax POSTs serially. At first, I tried using synchronous XHR requests, but this causes the browser to lock up for the duration of the request, and breaks my DOM-manipulation effects, which is unacceptable. So the pattern I ended up using is basically this:

var fcount = 0;    // incremented for each form to be submitted
function submit_form( num ) { 
    var fdata = { ... }; // data from form # num
    $.ajax( { async:    true,
              url:      '/index.cgi',
              data:     fdata,
              type:     'POST',
              success:  function() { 
                  if ( num < fcount ) { 
                      submit_form( ++num );
                  }
              }
           } );
}

$( '#submit_form_btn' ).click( function() { submit_form( 1 ) } );

The recursion strikes me as a bit of an ugly solution to what is essentially an iterative problem. Is there a cleaner or more elegant way that this could be handled?

I have a page with multiple forms that I submit via Ajax POSTs serially. At first, I tried using synchronous XHR requests, but this causes the browser to lock up for the duration of the request, and breaks my DOM-manipulation effects, which is unacceptable. So the pattern I ended up using is basically this:

var fcount = 0;    // incremented for each form to be submitted
function submit_form( num ) { 
    var fdata = { ... }; // data from form # num
    $.ajax( { async:    true,
              url:      '/index.cgi',
              data:     fdata,
              type:     'POST',
              success:  function() { 
                  if ( num < fcount ) { 
                      submit_form( ++num );
                  }
              }
           } );
}

$( '#submit_form_btn' ).click( function() { submit_form( 1 ) } );

The recursion strikes me as a bit of an ugly solution to what is essentially an iterative problem. Is there a cleaner or more elegant way that this could be handled?

• javascript
• jquery
• ajax
• recursion
• xmlhttprequest

• Why are you sending data piece by piece? Is there an awful lot of it or something like that? – Matti Virkkunen Commented Apr 10, 2010 at 20:29
• @Matti - each request takes a little while to process (file uploads that need to be munged). It would be too much to handle in a single request. – friedo Commented Apr 10, 2010 at 20:34
• iteration and recursion aren't as different as they first appear (stackoverflow./questions/931762/…, mitpress.mit.edu/sicp/full-text/book/book-Z-H-11.html#%_sec_1.2). Since you're dealing with asynchronous callbacks, stack growth isn't much of a concern. – outis Commented Apr 10, 2010 at 20:55
• I'm not too worried about the stack size -- just trying to see if there's a less circuitous way of doing the same thing. – friedo Commented Apr 10, 2010 at 21:16

4 Answers 4

Are these requests idempotent? If they are you can simply fire them off one after the other. Otherwise you are somewhat limited by the asynchronous nature of AJAX.

UPDATE

I did some more research and apparently there exists a framework called jQuery Message Queuing that handles serial AJAX requests via message-queuing. Maybe this can help you out.

A cleaner way would be to maintain a queue of callbacks(ajax requests) that you want to make and fire them one by one.

I would say raise the timeout for your script on the server and send everything in one POST.

If what you want to do is what your code does it is just fine to use a recursion structure.

But the suspicious part here is using more than one call, you are wasting a lot of time submitting multiple calls. Stick all the data in one call and get it over with, if it is in any way possible that is by far the preferred method.