AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=38&pId=-1
Javascript "Please Wait" Message Boxes
page
by Joe McLaughlin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 66631/ 50

Introduction
"Please Wait" messages are an excellent way to let the user know that your web based application is performing some action, such as loading a page or processing data. Without such a notification, users may begin clicking other controls on the web page, or close the browser due to the excessive delays. Peter Brunone wrote an excellent article on how to create "Please Wait" messages for loading web pages. This article can be found at /peterbrunone/pleasewait.asp. This article, however, only covers how to create "Please Wait" messages for when a web page is loading. I would like to expand on this article to create a "Please Wait" message that will display whenever a lengthy client side script is executed.
Step 1

The first step is to create the "Please Wait" message itself. I will use code similar to that used in Peter Brunone's article to create my message. The major difference between this code and his is that my DIV area will be hidden initially.


<DIV ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:30%;left:35%;visibility:hidden;">
 <TABLE BGCOLOR="#000000" BORDER=1 BORDERCOLOR="#000000" CELLPADDING=0 CELLSPACING=0 HEIGHT=200 WIDTH=300>
    <TR>
  <TD WIDTH="100%" HEIGHT="100%" BGCOLOR="#CCCCCC" ALIGN="CENTER" VALIGN="MIDDLE">
   <BR><BR>   
            <FONT FACE="Helvetica,Verdana,Arial" SIZE=3 COLOR="#000066"><B>Calculating.  Please wait...</B></FONT>
                <BR><BR>
  </TD>
 </TR>
    </TABLE>
</DIV>

Step 2 - Add Client Script

I now need to wrap the displaying and hiding of this DIV area around my lengthy client side script. Assume that the function calc_totals() is a JavaScript function that will take several seconds to execute. At first glance, it might appear that the following JavaScript function might work.

<script language="Javascript">
function do_totals()
 {
 document.all.pleasewaitScreen.style.visibility="visible";
 calc_totals();
 document.all.pleasewaitScreen.style.visibility="hidden";
 }
<script>

 

Unfortunately, this code will not work. The browser will not refresh nor display anything until the entire script completes. Therefore, the DIV area which is made visible in the forth line is hidden in the sixth line even before it has a chance to display.

 

Step 3 - Fix Script By Splitting It Up

The way around this is to split up the JavaScript code. The first function do_totals1() will show the DIV area and then call the setTimeout function. This function will start a timer that will execute the function passed as the first parameter after a number of miliseconds specified in the second parameter. In this case, do_totals2() will be called after one milisecond. How does this help us? When do_totals1() completes, but before do_totals2() begins, the browser will perform a refresh and display our "Please Wait" message.

<script language="Javascript">
function do_totals1()
 {
 document.all.pleasewaitScreen.style.visibility="visible";
 window.setTimeout('do_totals2()',1)
 }
 
function do_totals2()
 {
 calc_totals();
 document.all.pleasewaitScreen.style.visibility="hidden";
 } 
<script>

 

Finishing Touches

There is one other catch. Peter Brunone's article displays his "Please Wait" message before the web page has fully loaded. Since the web page has not loaded yet, the DIV area is assured to be at the top of the browser window and will always appear. This may not be true for a web page that has fully loaded. If the user has to scroll to the bottom of a long web page in order to click a button that executes our do_totals1() function, then the DIV area may display outside of the browser viewing area, defeating the purpose. A slight modification of the code will fix this, however.

<script language="Javascript">
function do_totals1()
 {
 document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 50)
 document.all.pleasewaitScreen.style.visibility="visible";
 window.setTimeout('do_totals2()',1)
 }
 
function do_totals2()
 {
 calc_totals();
 document.all.pleasewaitScreen.style.visibility="hidden";
 } 
<script>

 

The only difference between this code and the code shown previously is that the DIV area pixelTop property is set to be fifty pixels below the top of the visible page. This will guarantee that the "Please Wait" message box will always appear onscreen.

Joseph McLaughlin is a technical consultant from Sacramento, California.


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 10:52:50 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search