Question

I have a table style page with rows. Each row has a checkbox. I can select all/many checkboxes and click ‘submit’ and what is does is a Jquery ajax call for each row.

Basically I have a form for each row and I iterate over all the checked rows and submit that form which does the jquery ajax call.

So I have a button that does:

       $('input:checked').parent('form').submit(); 

Then each row has:

            <form name='MyForm<%=i%>' action='javascript:processRow(<%=i%>)' method='post' style='margin:0px;'>                 <input type='checkbox' name='X' value='XChecked'/>                 <input type='hidden' id='XNumber<%=i%>' name='X<%=i%>' value='<%=XNumber%>'/>                 <input type='hidden' id='XId<%=i%>' name='XId<%=i%>' value='<%=XNumber%>'/>                 <input type='hidden' id='XAmt<%=i%>' name='XAmt<%=i%>' value='<%=XAmount%>'/>                 <input type='hidden' name='X' value='rXChecked'/>             </form> 

This form submits to processRow:

   function processRow(rowNum)    {         var Amount = $('#XAmt'+rowNum).val();         var XId = $('#XId'+rowNum).val();         var XNum = $('#OrderNumber'+rowNum).val();         var queryString = 'xAmt=' + '1.00' + '&xNumber=' + OrdNum + '&xId=' + xId;           $('#coda_'+rowNum).removeClass('loader');         $('#coda_'+rowNum).addClass('loading');           $.ajax({           url: 'x.asp',           cache: false,           type:  'POST',           data:  queryString,           success: function(html){             $('#result_'+rowNum).empty().append(html);             $('#coda_'+rowNum).removeClass('loading');             $('#coda_'+rowNum).addClass('loader');           }         });    } 

What I wanted to know is, from this is there a way I can tell if all my Ajax calls are complete. Reason being that want to enable/disable the submit button while all these calls are taking place.

Thanks and please note that I had to mangle my variable names due to the sensitivity of the application, so many of them may be duplicated.

Answer 1

The easy way

The easiest way is to use the .ajaxStop() event handler:

$(document).ajaxStop(function() {   // place code to be executed on completion of last outstanding ajax call here }); 

The hard way

You can also manually detect if any ajax call is still active:

Create a variable containing number of active Ajax connections:

var activeAjaxConnections = 0; 

just before opening new Ajax connection increment that variable

$.ajax({   beforeSend: function(xhr) {     activeAjaxConnections++;   },   url (...) 

in success part check if that variable equals to zero (if so, the last connection has finished)

success: function(html){   activeAjaxConnections--;   $('#result_'+rowNum).empty().append(html);   $('#coda_'+rowNum).removeClass('loading');   $('#coda_'+rowNum).addClass('loader');   if (0 == activeAjaxConnections) {     // this was the last Ajax connection, do the thing   } }, error: function(xhr, errDesc, exception) {   activeAjaxConnections--;   if (0 == activeAjaxConnections) {     // this was the last Ajax connection, do the thing   } } 

As you can see, I’ve added also checking for return with error