Detect when all AJAX requests are complete – jQuery

When working with multiple AJAX requests at that time its hard to detect when will be all request is being completed.

You can use the setTimout() method which will execute your action after your given time. But it is not a better solution.

jQuery have inbuilt AJAX event handler that helps you in this situation.

Detect when all AJAX requests are complete - jQuery


Contents

  1. ajaxStop()
  2. Demo 1
  3. Disable completion detecting
  4. Demo 2
  5. Conclusion

 

1. ajaxStop()

This event handler executes when all AJAX requests are being completed. It also triggers when an AJAX request is canceled.

Syntax – Register event handler

$( document ).ajaxStop(function(){
 // Statement
});

Example

Loop all checked checkboxes and sending AJAX request which will remove <table> row when successfully deleted.

Register ajaxStop() event handler which execute when all AJAX request is being completed and display the message on the screen that hides after 4 seconds using setTimout().

Completed Code

$(document).ready(function(){

 // Delete checked rows
 $('#but_del').click(function(){

  // Loop all checked checkboxes
  $('table input[type=checkbox]:checked').each(function(){
   var el = this;
   var split_id = this.id.split('_');
   var delid = split_id[1];

   // AJAX request
   $.ajax({
    url: 'updateData.php',
    type: 'post',
    data: {delid:delid},
    success: function(response){

      // Remove row
      $(el).closest('tr').remove();
    } 
   });
  });
 });
 
 // ajaxStop
 $(document).ajaxStop(function(){
 
  // Show message
  $('#message').text('Delete successfully');
  setTimeout(function(){
   $('#message').text('');
  },4000); 
 });
});

 

2. Demo 1

Check the checkboxes following with row and click the Delete button.


 

3. Disable completion detecting

The global: false option is been used to stop .ajaxStop() from firing.

By this way, other AJAX requests would affect if you are performing some action from .ajaxStop() e.g. reload the page when all request gets completed.

Syntax –

$.ajax({
   -
   -
   global: false,
   -
});

Example 

I added one more AJAX request which will execute when add button gets clicked. With AJAX request passing global: false to stop .ajaxStop() from detecting and show the message.

Completed Code

// Add new row
$('#but_add').click(function(){
 var name = $('#txt_name').val();
 var email = $('#txt_email').val();
 
 if(name == ''){
  return false;
 } 

 // AJAX request
 $.ajax({
  url: 'updateData.php',
  type: 'post',
  data: {name: name,email: email},
  global: false, 
  success: function(response){
   
   // Add row
   $('table').append(response);

   $('#txt_name').val('');
   $('#txt_email').val('');
  }
 });
});

 

4. Demo 2

Check the checkboxes following with row and click the Delete button. To add new row fill values in the input element and click Add new button.


 

5. Conclusion

You need to attach .ajaxStop() to the document to detect when all AJAX requests get completed. Use global: false option in the AJAX requests that you don’t want to be detected by .ajaxStop().

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *