[jQuery] Ajax loading/please-wait image

[Shane]

Hi,

I want to add your typical 'Loading' animated gif to a page while it's
updating via ajax. I'm trying to do this in the $.displayCal function
below. The $('div#load-wait') element is a div with the img inside.

When the page initially loads, I don't see the image at all, even when
$.post takes awhile to load. I see the image if I comment out $
('div#load-wait').hide();

The problem, I'm guessing, is that the image is being hidden before
$.post has a chance to finish.

I know there's an easy solution w/o having to resort to setTimeout,
but I can't figure it out.

Thanks!!

[code]

var curlink;
$.setup = function(){
        $('a[rel*=facebox]').facebox();
        $("a.cal-changedate").click(function(){
                $.displayCal($(this).attr("rel"));
                });
}

// make rpc call / response
$.displayCal = function(fDate){
        $("div#load-wait").show();
        $.post(
        "/async/ajax_calendar.php",
        {"date": fDate},
        function(data, textStatus){
                if(textStatus == "success"){
                        $("#event-cal").html(data);
                        $.setup();
                }else{
                        alert("Oops! Communication errors.");
                }
        });
        $("div#load-wait").hide();
};


var today = parseInt(new Date().getTime().toString().substring(0,
10));
$.displayCal(today);
[code]