catch all ajax requests in jquery

Question

I'm wanting to show a "Loading" progress bar every time an ajax request is sent. Is it possible to be notified ANYTIME an ajax request is sent using jQuery?

score 32 · Accepted Answer · answered Jan 28 '12 at 07:54

32

You could use the $.ajaxSetup() method to set global AJAX properties that will apply for the entire page:

$.ajaxSetup({
    beforeSend: function() {
        // show progress spinner
    },
    complete: function() {
        // hide progress spinner
    }
});

answered Jan 28 '12 at 07:54

Darin Dimitrov

1,023,142
271
3,287
2,928

2

Will it catch even the ones that do not use jQeury or that's not possible? – rain01 May 09 '13 at 11:53
2

@rain01, no, this will catch only jQuery AJAX requests. – Darin Dimitrov May 09 '13 at 12:09
@DarinDimitrov What about using on of those handlers directly? http://api.jquery.com/category/ajax/global-ajax-event-handlers/ – Adriano Sep 11 '14 at 08:23

score 6 · Answer 2 · answered Oct 08 '14 at 18:23

For some reason or another $.ajaxSetup() wasn't working for me. After reading through the docs though, I found the following:

Note: Global callback functions should be set with their respective global Ajax event handler methods—.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()—rather than within the options object for $.ajaxSetup().

Try $.ajaxStart() and $.ajaxComplete() instead:

$(document).ajaxStart(function () {
    console.log('Request Initiated');
});
$(document).ajaxComplete(function () {
    console.log('Request Complete');
});

score 2 · Answer 3 · answered Jan 28 '12 at 07:54

2

Try using jQuery's ajaxStart event

answered Jan 28 '12 at 07:54

epascarello

204,599
20
195
236

1

I would probably use `ajaxSend` instead as it is triggered for all the ajax requests (vs only the 1st one with `ajaxStart`). see also http://stackoverflow.com/questions/3735877/whats-the-difference-between-1-ajaxstart-and-ajaxsend-and-2-ajaxstop-and – Adriano Sep 11 '14 at 08:29
Another note: @LordZardeck might want to remove the "loading..." progress bar when all the ajax requests either finish successfully or with errors. That's something to be done using `.ajaxError()` and `.ajaxStop()` – Adriano Sep 11 '14 at 08:34

catch all ajax requests in jquery

3 Answers3

Linked