How to know if there is any Ajax Request and ajax Success

Question

I wonder how can I code this:

//if there is any ajax request
   $("#loader").css("display","block");
//on success:
    $("#loader").css("display","none");

Note : I am not going to code it again and again in my each ajax request function. I want it generic so that my script knows if there is any ajax request do $("#loader").css("display","block"); and if there is any ajax success do $("#loader").css("display","none");.

Cᴏʀʏ · Accepted Answer · 2012-03-16T16:34:43.830

8

The magical thing you are looking for is jQuery.ajaxStart() and jQuery.ajaxStop(). You might also find jQuery.ajaxComplete() useful.

Example:

$("#loader").ajaxStart(function() {
   $(this).show();
}).ajaxStop(function() {
   $(this).hide();
});

You should use the hide() and show() methods instead of changing the display CSS attribute.

edited Mar 16 '12 at 16:34

answered Mar 16 '12 at 16:27

Cᴏʀʏ

105,112
20
162
194

if i have two loaders in one page than ?? – Fawad Ghafoor Mar 22 '12 at 14:59
@FawadGhafoorasXaineeKhan: Do you want to show one per AJAX request or both or what? You'll have to explain what you're doing a little more. You can show and hide a loader on an individual `$.ajax()` call if you'd like, so let me know if that's what you're after. – Cᴏʀʏ Mar 22 '12 at 15:22
i have one page in which there are 2 ajax requests and also 2 loaders.i wana show one loader per ajax request – Fawad Ghafoor Mar 22 '12 at 15:38
1

@FawadGhafoorasXaineeKhan: You could show a loader in the `beforeSend()` event and then hide it in the `error()` or `success()` callback in your `$.ajax()` call. You define `beforeSend()` just like you would `success()`. – Cᴏʀʏ Mar 22 '12 at 15:56

score 3 · Answer 2 · edited Mar 19 '12 at 14:46

3

Take a look at $.ajaxStart and $.ajaxEnd when you wire up your app in $.document(ready):

$.ajaxStart(function(){
  $("#loader").css("display", "block");
})
.ajaxStop(function(){
  $("#loader").css("display", "none");
});

UPDATE forgot about ajaxStop...@Cory's answer reminded me. Updated my answer.

edited Mar 19 '12 at 14:46

Cᴏʀʏ

105,112
20
162
194

answered Mar 16 '12 at 16:29

David Hoerster

28,421
8
67
102

shanabus · Answer 3 · 2012-09-10T12:40:11.417

These other solutions are great but I am not sure they address your concern of calling your $("#loader") CSS changes on start and success.

May be something like this:

$(document).ajaxStart(function() {

  // do something on start
  $("#loader").css("display","block");

}).ajaxError(function(e, xhr, settings) {
  // do something on error
  $("#loader").css("display","none");

}).ajaxSuccess(function() {

  // do something on success
  $("#loader").css("display","block");

});

Check out this properly working example: http://jsbin.com/ocovoq/3/edit#preview

score 1 · Answer 4 · answered Mar 16 '12 at 16:31

If you fire off two or three ajax calls, ajaxStop will only fire when the last one is done.

var isMakingAjaxCall;

$(document).ready(function () {

    // Loading Screen for Ajax Calls
    $("#loader").hide();
    $("#loader").ajaxStart(function () {
        isMakingAjaxCall = true;
        RepositionLoading();
        $("#loader").fadeIn();
    });
    $("#loader").ajaxStop(function () {
        $("#loader").fadeOut();
        isMakingAjaxCall = false;
    });
});

function RepositionLoading() {
    $("#loader").css('left', "20px");
    $("#loader").css('top', "20px");
};

How to know if there is any Ajax Request and ajax Success

4 Answers4

Linked