[jQuery] Ajax loading/please-wait image
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]