How to know when all ajax calls are complete

Question

I have a table style page with rows. Each row has a checkbox. I can select all/mamy 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

Create a variable containing number of active Ajax connection:

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