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

Question

I want to know the easiest way of showing a 'loading' gif to a specific jquery ajax request.

i have tried:

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

but then ALL ajax requests will trigger it. i just want a specific jquery ajax request to trigger the loading process (maybe a gif will be shown).

how do i do that?

Answer 1

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 2

Set container's content to the gif image. Then do the Ajax call. The gif image will be removed by the Ajax callback function.

Answer 3

Just show the image before you start the ajax call, and then in your ajax "success" or "complete" handler, hide it.

Answer 4

In beforeSend callback you have to show the spinner and in complete you have to hide it. Just FYI: ajaxStart and ajaxStop are global ajax events while beforeSend and complete are local.

Answer 5

I tend to do something along the lines of:

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

when I begin and

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

when I'm done. Then I have

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

in my css. Nice and clean.