Hi,

 

I need to develop a way to display a "wait/page loading" image before I make calls to the server.

So I created an animated gif at http://www.ajaxload.info/  and put the image in a DIV tag with it's attribute set to display:none.  Basically when a user clicks on my page, I want to display this "wait" animation before making the call to the server to get my data.

 

Code:

$.ajax
        ({
            type: "POST",
            url: "data.asmx/myPage",
            data: "test",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            beforeSend: function() {showLoading(); },
            complete: function() { hideLoading(); },
            success: function(data) { ... }
             

The showLoading method is the one that displays the DIV tag:

 

function showLoading()
{   
      $("#loading").show();
} 

And here is my DIV tag:

 

<div id="loading"> <p><img src="Images/wait.gif" /> Please Wait</p> </div>

 

I thought to use beforeSend however the only way it all works is by putting an alert('test') after showLoading()too to make the UI refresh.  How can I do this using jQuery's UI programatability?

 

Also note I have set async=false as I have multiple instances of data being returned.

 

Thank you in advance for help.