showing progress with native jquery ajax functions

Question

the problem is whenever I use $.get, $.post or $.ajax, I can't find a way to trigger a callback when the server is processing something. I can do it with the ajaxform plugin via the beforeSubmit method, but with the formerly mentioned functions, I can't find a way to do it. $.ajax has a beforeSend method, but according to the documentation all it does is call a "callback to modify the headers". I want a callback to do something like block the page, show a popup, display an animated gif etc.

Is there a way to show that the server is processing a request via the $.ajax, $.get, $.post, $()load?

Thanks in advance!

Answer 1

You're looking for ajaxStart I believe. Take a look at the example.

Answer 2

I already showed you in another question of yours how you can use ajaxStart for this.

Here I will suggest yet another method to do this

$('.be-delete').live('click', function(e) {
    e.preventDefault();
    var object =$(this);
    // if request hasn't finished after 250ms show spinner
    // if request is fast the timer is canceled in success/error
    var timer = setTimeout(function() {
        //I use append here (instead of html()) which doesn't destroy original content
        //now you only need to use CSS img.spinner { ... } to position the spinner correctly
        object.parent().append('<img class="spinner" src="media/images/jquery/spinner.gif"/>');
    }, 250);
    var url = object.attr('href');
    $.ajax({
        url : url,
        error : function(){
            clearTimeout(timer);
            object.find("img#spinner").remove();
            alert('An error has occurred, no updates were made');
        },
        success : function() {
            clearTimeout(timer);
            object.parent().fadeOut('slow', function(){object.parent().remove()});
        }
    });
});