How to know when all ajax calls are complete

detect ajax request javascript
javascript wait until ajax request is finished
jquery check if ajax request is in progress
ajaxstop
jquery ajax
wait until all ajax calls are done
wait for ajax response before continuing javascript
jquery cancel all ajax requests

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.


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

How to know when all ajax calls are complete, Description: Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Any and all handlers that have been registered with the . 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.


A neat solution would be to use;

$("body").ajaxStop(function() {
    //Your code
});

For more information check out the jQuery .ajaxStop function at http://api.jquery.com/ajaxStop/

Detect when all AJAX Requests are Complete - jQuery, Call function after all ajax requests complete Promises have a all static method When I first tried contributing to open source it was very difficult finding� The "complete" function executes only after the "success" of ajax. So try to call the printWithAjax () on "complete". This should work for you.


Maybe:

jQuery.active == 0

Stolen from:

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

More info on StackOverflow:

jQuery.active function

.ajaxComplete(), ajaxComplete() and check if the ajax call retrieves the linkit form elements. Example: $(document).ajaxComplete(function(� If you want to know when all ajax requests are finished in your document, no matter how many of them exists, just use $.ajaxStop event this way: $(document).ajaxStop(function { // 0 === $.active });


How about just simply use if?

success: function(html){
   if(html.success == true ){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");

          }
   }

jquery wait for all ajax requests to complete Code Example, In the root of jQuery Ajax is $.ajax() function which is used to perform asynchronous Learn to utilize the full power of AJAX with jQuery to make application you must use the success / error / complete callback options instead of the context, Specifies the “this” value for all AJAX related callback functions. The OpenWeatherMap API provides the complete weather information for any location on Earth including over 200,000 cities. This API provides the response in JSON format. To make your API call, first create your Free Account in their website and get your API KEY. Then use this KEY to make API calls with jQuery AJAX.


Call function after all ajax requests complete : javascript, To know when all ajax request is completed and no other ajax activity is in process, ajaxStop() method can be used. This event fires a. AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally common to transport data as plain text or JSON text. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.


How do I get a data value after all AJAX calls are complete?, Multiple Simultaneous Ajax Requests (with one callback) in jQuery other to work right) we need to wait for all three of them to be complete before proceeding . All three requests in parallel … wait for all three to be done … go. Perhaps do a matchMedia test on some media queries and determine the device's screen � When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by jQuery.ajax() is a Promise-compatible object and can be used this way:


jQuery AJAX Tutorial - jQuery.ajax(), Definition and Usage. The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.