load doesn't trigger ajaxSetup complete handler on complete

Question

I have

// Ajax setup
 $.ajaxSetup({
 beforeSend: function() {
 $('#general-ajax-load ').fadeIn();
 },
 complete: function() {
 $('#general-ajax-load ').fadeOut();
 }
});

on page load to set loading animation for all my ajax calls. It works perfect, except for load() calls. For loads only beforeSend is triggered, and complete never gets called, Which results with showing animation which never dissapears.

Any idea?

Answer 1

According to http://bugs.jquery.com/ticket/4086#comment:4, the "correct" way would be:

$(document).ajaxSend(function(event, jqXHR, settings) {
    $('#general-ajax-load ').fadeIn();
});

$(document).ajaxComplete(function(event, jqXHR, settings) {
    $('#general-ajax-load ').fadeOut();
});

I just did some testing and that indeed seems to work in all cases (including $.load).

Answer 2

Adding success fixed the problem, thanks (I can swear I tried it before)

 $.ajaxSetup({
 beforeSend: function() {
 $('#general-ajax-load ').fadeIn();
 },
 complete: function() {
 $('#general-ajax-load ').fadeOut();
 }
 success: function() {
 $('#general-ajax-load ').fadeOut();
 }
});

:)

Answer 3

The $.load manual says:

...It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function.

It would seem that $.load's implicit callback function is overriding the complete callback in your $.ajaxSetup. The $.ajaxSetup documentation says:

All subsequent Ajax calls using any function will use the new settings, unless overridden by the individual calls, until the next invocation of $.ajaxSetup().

I guess the solution would be to replace your $.load calls with $.get (or the more verbose $.ajax). You could also try using success instead.