This is my first post regarding Ajax.  What I did was created a few lines of code in Javascript and HTML which allows you to essentially have a StatusBar like display for your Ajax calls.  Useful for those longer-running calls.

Here is the setup:

var done=false; var dispObject; var StatusBarPrefixText='Calculating Please Wait'; function timeout(counter){ if(!done) { dispObject.innerHTML = dispObject.innerHTML+ '.'; if(counter==7) { dispObject.innerHTML = StatusBarPrefixText; counter=-1; } counter++; window.setTimeout('timeout('+counter+')', counter*100); } } function InitStatusBar() { done=false; dispObject=document.getElementById("StatusBar"); dispObject.innerHTML = StatusBarPrefixText; }

To integrate this with your Ajax calls you only need to do three things:

   1. Before calling your actual Ajax method, call: InitStatusBar();

    2. After calling your Ajax method, call: timeout(0);

For example:

If you had:

Now changes too:

<INPUT onclick="InitStatusBar(); SiteMethods.ServerSideAdd(1, 2, ServerSideResult_CallBack); timeout(0);" type="button" value="Add">

   3. And finally place your status bar object anywhere on the page:

<SPAN id="StatusBar"> </SPAN>

3 Comments

• Dave Tigweld said Monday, August 15, 2005 6:41:00 PM

  Haven't tried your example but its definitely something someone using ajax would need. I typically use mouse capture and change the status of the cursor to an hourglass as well.

• Anatoly said Tuesday, August 16, 2005 12:00:00 AM

  Few thoughts
  1) You can create div at run-time on client inside InitStatusBar()
  2) I think timeout(0) call must be maid from ServerSideResult_Callback function and not after ServerSide call.
  3) Definitely useful thing
  

• mg said Thursday, October 1, 2009 7:43:32 PM

  Just what I was looking for. Simple and functional to keep the users of my tool patient and assured that something IS happening. :)