CODEWITHSUNDEEP
javascriptjqueryajax
napfernandes
napfernandes

Reputation: 1359

Generic way to handle all AJAX calls

Is there a way to detect all AJAX calls (both GET and POST)? I need to do a generic way to show a loading div while the AJAX call process are running. Something like the code below:

$.ajax({
   url: 'my/url',
   type: "GET",
   dataType: "json",
   beforeSend: function() {
       $('#loading').show();
   },
   success: function() {
       $('#loading').hide();
       // do some stuff...
}

Instead to call in every AJAX beforeSend() and success() behaviors (show and hide the loading div), I'm searching a generic way to handle it. When I have an AJAX call, I just do it:

$.ajax({
   url: 'my/url',
   type: "GET",
   dataType: "json",
   success: function() {
       // do some stuff...
}

When that beforeSend() behavior is implicity in this request and the same for the success() hide behavior. Do you have any idea how can I treat this thing?

Thank you all!

Upvotes: 2

Views: 271

Answers (2)

Richard A.
Richard A.

Reputation: 1157

Funnily enough, I was trying to do this myself this morning!

$('#loading').bind('ajaxSend', function() {
    $(this).show();
}).bind('ajaxStop', function() {
    $(this).hide();
}).bind('ajaxError', function() {
    $this.hide();
});

Obviously, lots of different ways to achieve this, but I prefer to bind the visibility of the loading message to the AJAX events, rather than the other way around...

Upvotes: 2

palaѕн
palaѕн

Reputation: 73906

Yes, you can do this using .ajaxStart() & .ajaxStop() methods like:

$(document).ready(function () {
    $(document).ajaxStart(function () {
        $('#loading').show();
    }).ajaxStop(function () {
        $('#loading').hide();
    });
});

Upvotes: 4

Related Questions