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/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: ``` ``` This form submits to processRow: ``` function processRow(rowNum) { var Amount = $('#XAmt'+rowNum).val(); var XId = $('#XId'+rowNum).val(); var XNum = $…

Accepted Answer

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

Solution

Problem

Related problems