jquery ajax loader

Question

I have script like this :

    $("#addk").bind("click", function(event){
        //alert("here!");
        $("#loader-overlay").show();
        $.ajax({
            'async':"False",
            'type': "POST",
            'url': "http://url/feedback/",
            'data': $("#form").serialize(), 
            'success': function(msg){
                $("#errors").html(msg);
                },
            'error' : function(){
                $("#errors").html('<p>fail</p>');
            }
        });
        $("#loader-overlay").hide();
        //return false;
    });

For some reason the loader screen never appears, even though the ajax runs for a few seconds. If i write

$("#loader-overlay").show();

into console, then it works just fine.

Its probably something very simple that i just cant put my finger on.

Alan

Answer 1

Your code is basically correct, you are trying to do a synchronous call so the code after the ajax call should be executed only when the ajax call returns. But you have one small mistake there. Try this:

async: false

Using "false" equals to true as it is a non-zero length string, thus you will have an asynchronous call and the loader is hidden immediately after the ajax call is initiated – it will not wait for the call to finish.

Also, you don't need to quote the keys, so this style would work also:

$.ajax({
    async: false,
    type: "POST",
    url: "http://url/feedback/",
    ....

But why do you even need to make the call synchronous? Doing a synchronous call will hang all other process for the duration of the call, so it can be distracting. If you show the loader element before the ajax call, then hide it again in the success handler, it should work allright:

$("#addk").click(function(event) {
    $("#loader-overlay").show();
    $.ajax({
        type: 'POST',
        url: 'http://url/feedback/',
        data: $("#form").serialize(),
        success: function(msg){
            $("#errors").html(msg);
            $("#loader-overlay").hide();
        },
        error: function() {
            $("#errors").html('<p>fail</p>');
        }
    });
    return false;
});

Answer 2

You should probably have the showing and hiding of the loading as callbacks within the ajax request. Check out: http://api.jquery.com/jQuery.ajax/#callback-functions

So, you might do:

$.ajax({..., beforeSend: function(){ /* show the loading thing */ },
    complete: function(){ /* hide the loader */ }});