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

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 */ }});