How to show ajax loading gif only for a specific request?

Question

How do you show ajax gif only for a specific request? For example my page is calling a web-service every 30 seconds in a background, and I don't want to show the gif during this callback. On the other hand I want to show the gif, when I'am making manual ajax requests.

I am using jQuery.

edit: I didn't setup the global handler as shown here http://api.jquery.com/ajaxStart/, just by attaching to the .ajaxStart event. But I don't want to show/hide the gif manually on every request too. I need some generic solution.

Answer 1

$('#manualRefresh').click(function(){
    $('#myContainer').html('<img src="my-ajax-gif.gif">');
    $.get( ..., function(data){ ('#myContainer').html(data) });
});

Like that?

Answer 2

Please try this:

$('#save').click(function(){
    $('#ShowLoading').show();
    $.ajax( ..., success:function(data){....$('#ShowLoading').hide();}, 
          error:function(){....$('#ShowLoading').hide();});
});

HTH

Answer 3

I use the BlockUI plugin, makes it pretty easy really. This is a simple wrapper function I wrote for some demo code:

function wjBlockUI(msg) {

var defaultMsg = '<img src="../images/activity.gif" />';

if (null !== msg) {
    defaultMsg = msg
}

$.blockUI({ overlayCSS: { backgroundColor: '#aaa' }, message: defaultMsg });

}