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 has the inbuilt event handler to detect AJAX completion.
Contents
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
3. Disable completion detecting
The global: false option is been used to stop .ajaxStop() from firing.
Syntax –
$.ajax({
-
-
global: false,
-
});
Example
I added one more AJAX request which executes when add button gets clicked. With AJAX request passing global: false to stop .ajaxStop() from detecting the AJAX request completion of this request.
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();
}
});
});
});
// 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('');
}
});
});
// ajaxStop
$(document).ajaxStop(function(){
// Show message
$('#message').text('Delete successfully');
setTimeout(function(){
$('#message').text('');
},4000);
});
});
4. Demo 2
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 if you don’t want to detect by .ajaxStop().
