Rob Chartier ~ Contemplation...

Javascript Status Bar sample (Useful for Ajax)...

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>