Easiest way to show "loading" when using jquery ajax?

Question

I want to know the easiest way to show the "loading" gif for a specific jQuery ajax request.

I tried:

$(document).ajaxStart(function() {
    $('.hideOnLoad').hide();
});
$(document).ajaxStop(function() {
    $('.hideOnLoad').show();
});

but then all ajax requests will call it. I just want a particular jQuery ajax request to initiate the download process (maybe a gif will be shown).

how to do it?

Answer 1

In the callback beforeSendyou need to show the counter, and in completeyou need to hide it. Just FYI: ajaxStartboth ajaxStopare ajax global events, and beforeSendthey completeare local.

Answer 2

I usually do something like

$('#someTrigger').click( function(el) {
    // do my ajax request with callback, onComplete
    $('.someImageClass').show();
});

function onComplete(resp, respText, XMLHttpRequset) {
    // do stuff
    $('.someImageClass').hide();
}

Answer 3

Just show the image before starting the ajax call, and then in your ajax a “successful” or “full” handler, hide it.

Answer 4

Set the contents of the container to a graphic image. Then make an Ajax call. The gif image will be deleted using the Ajax callback function.

Answer 5

I usually do something line by line:

$('#some-div').addClass('loading');

when i start and

$('#some-div').removeClass('loading');

when i finish Then i have

#some-div { 
    background: transparent url('ajazz-loader.gif') no-repeat center center; 
}

in my css. Nice and clean.