Javascript "Please Wait" Message Boxes
 
Published: 27 Sep 2003
Unedited - Community Contributed
Abstract
"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. This article describes how to go about creating such a device.
by Joe McLaughlin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 87070/ 127

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.



User Comments

Title: sdfd   
Name: sdfsdf
Date: 2012-11-29 6:05:56 AM
Comment:
asdasda
Title: ccc   
Name: ccc
Date: 2012-11-28 3:36:53 PM
Comment:
ccc
Title: asdadadaddsa   
Name: adadadadadads
Date: 2012-10-30 12:14:58 PM
Comment:
afdsdfdsgdsgdsgcsgagca
Title: test   
Name: test
Date: 2012-10-25 12:30:48 AM
Comment:
test
Title: xxx   
Name: xxx
Date: 2012-10-12 6:28:00 AM
Comment:
xxx
Title: ngh   
Name: hgfh
Date: 2012-10-04 4:20:49 AM
Comment:
hg
Title: dsfdsf   
Name: sdfdsf
Date: 2012-09-28 6:20:16 AM
Comment:
dsfdsfdsfdsfdsfd
Title: test   
Name: test
Date: 2012-09-27 9:59:22 AM
Comment:
test
Title: sdf   
Name: sdf
Date: 2012-09-16 7:47:36 AM
Comment:
sdf
Title: hi   
Name: ffff
Date: 2012-08-30 1:31:20 AM
Comment:
adghhfh
Title: dfgd   
Name: df
Date: 2012-08-29 9:49:02 AM
Comment:
fd
Title: s   
Name: d
Date: 2012-08-09 4:54:35 AM
Comment:
vgsdfgfdgg
Title: d   
Name: dd
Date: 2012-06-14 10:41:46 PM
Comment:
sdfsdf
Title: asdf   
Name: asdf
Date: 2012-06-08 11:06:33 AM
Comment:
asdf
Title: rrrrrrrrrrrrrrr   
Name: rrrrrrrrrrrrrrrrrr
Date: 2012-06-06 2:20:00 AM
Comment:
rrrrrrrrrrrrrrrrrrr
Title: sdfdsfd   
Name: sdfsdfsdf
Date: 2012-05-31 10:34:07 AM
Comment:
dsfdsfsdf
Title: this   
Name: hjhjhkjh
Date: 2012-05-31 10:33:12 AM
Comment:
fytuyuyu
Title: xbx   
Name: fxx
Date: 2012-05-16 11:00:10 AM
Comment:
xcbxcb
Title: asp   
Name: asp
Date: 2010-10-20 4:07:30 AM
Comment:
u have to show coding with example
then it will be perfct
Title: asp   
Name: asp
Date: 2010-07-21 2:52:35 AM
Comment:
ok thanks
Title: asp   
Name: asp
Date: 2010-07-21 2:51:38 AM
Comment:
how will display the message in asp
Title: Best One   
Name: Rakesh babele
Date: 2010-04-16 2:19:49 AM
Comment:
It is really best way to dispaly the waiting message.

Thanx a lot
Title: Good One   
Name: Veerabhaskar
Date: 2010-04-16 2:17:27 AM
Comment:
This is really good one, it improves the site value
Title: Thanks for your code   
Name: KK
Date: 2010-04-12 1:56:33 PM
Comment:
I have a similar "Please Wait" DIV displayed on my page that MAY take long time to load (depending on bandwidth). However, when the connection is fast, the "Please Wait" DIV is displayed momentarily & looks like a bug on the page.

How do I make sure that this DIV is displayed only after a certain time has elapsed - basically it is going to take longer & hence we should display Please Wait message, otherwise don't display it at all. Would appreciate your help!

KK
Title: works perfectly !!   
Name: Sapan
Date: 2009-03-28 5:48:31 AM
Comment:
thanks a lot..
works perfectly.. :)
Title: how to implemet   
Name: tom
Date: 2009-03-27 4:29:04 PM
Comment:
I have used the Peter´s Brunone script "pleasewait" but I want to use the Joseph´s McLaughlin code (this one) so I dont know how to incorpore a my asp file, I hope some help : tom
Title: Thats what I needed   
Name: Kishor Thakur
Date: 2009-02-12 4:22:00 AM
Comment:
Thanks Joe McLaughlin. Your artical has given me the great Pleasure to me. You are gem.


Thanks a lot again
Title: No definition of calc_totals()   
Name: Am
Date: 2009-01-20 6:59:14 AM
Comment:
U hav used calc_totals() function but i found no definition of calc_totals().Please do chk it
Title: offset the div from top of page window   
Name: JF
Date: 2007-09-06 5:32:52 PM
Comment:
Regarding this line of code under "finishing touches":

document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 50)

First, I think the line is missing the final ";". Second "pixelTop" is not a property defined in CSS. Use "top" instead. Third, document.body.scrollTop may return zero - use "document.documentElement.scrollTop" instead. Finally, if you defined the div style using something like .... top: 250px; then you will need to add "+ 'px'" to the end. So we now have:

document.all.pleasewaitScreen.style.top = (document.documentElement.scrollTop + 50) + 'px';
Title: Hurry   
Name: Jagjit
Date: 2007-08-02 10:15:31 AM
Comment:
Yes, this was my requirement and i got it. Thanks a lot ASPalliance for it.
Title: Very good   
Name: Miriam
Date: 2007-07-25 3:26:39 PM
Comment:
Thank you. This was helpful for a newbie. I modified it to use the display:block and display:none and it worked fine. I have the function called by an onClick of the submit button.
Title: Easiest way to display Please Wait Screen   
Name: dng
Date: 2007-06-01 1:25:18 PM
Comment:
Hi,

This is a good article, but to display the Please wait message in easiest way, you will find this link useful http://dotnetguts.blogspot.com/2007/02/please-wait-screen-for-heavy-loading_12.html


Keep going good work
Dotnetguts (DNG)
http://dotnetguts.blogspot.com
Title: please wait signal   
Name: baba
Date: 2007-03-22 3:03:47 AM
Comment:
excelllent
Title: Hmmm....   
Name: Dave
Date: 2007-02-20 9:24:39 PM
Comment:
Niiiiiiiiiiiiiiiiiiiiiiiiiice.... I've been lookin' for this for ages!!!! Like Steve-O said, display:none; would work better than visibility: hidden;
Title: We can give Please wait msg using Ajax   
Name: Sandesh
Date: 2007-01-10 2:42:11 AM
Comment:
we can give please wait msg using ajax

how?

Ans:-
when we are requesting some thing using ajax then there are 'readystate' as 0,1,2,3,4 4 is a last state where all data is recieved so show that div while readystate is not 4
Title: boo   
Name: boo
Date: 2006-10-03 7:49:55 AM
Comment:
I want this thing to work with AJAX
where I hav a div in which I m calling another page by AJAX
so can any one tell me how to give Please wait msg in that div before the page inside that div is completely loaded
Title: Ya this is a good solution but I m lookin for something else   
Name: Abhishek
Date: 2006-08-10 2:19:03 AM
Comment:
Actually I want this thing to work with AJAX
where I hav a div in which I m calling another page by AJAX
so can any one tell me how to give Please wait msg in that div before the page inside that div is completely loaded

Thanks
Abhishek
Title: Simple and Good   
Name: Dinesh
Date: 2006-06-06 7:22:54 AM
Comment:
This is Simple one using only javascript
Title: good   
Name: indra
Date: 2006-05-11 6:43:07 AM
Comment:
thankful to you
Title: Good Show   
Name: Naresh Kumar Ravuri
Date: 2006-03-07 4:13:12 AM
Comment:
God show and keep it up
Title: ya   
Name: kiran
Date: 2006-02-22 12:05:39 PM
Comment:
yeah i actually want the jscript to use in the dotnet
Title: exactly what i wanted   
Name: Pamita Rao
Date: 2006-02-08 12:49:28 AM
Comment:
thanks a lot
Title: ROCK   
Name: ROCK
Date: 2005-12-26 6:40:30 AM
Comment:
Not much good.Need to improve
Title: Just i was needed   
Name: Gurudatt Kumar
Date: 2005-09-13 3:29:03 PM
Comment:
Yes, this was my requirement and i got it. Thanks a lot ASPalliance for it.
Title: Very good   
Name: Davidka Bujolastanna
Date: 2005-08-17 5:01:19 PM
Comment:
Your example brought me great pleasure!
Title: Great Job!   
Name: Steve
Date: 2005-07-22 11:39:58 AM
Comment:
Good work explaining. I learned somthing new.
Title: Nice   
Name: Steve-O
Date: 2005-06-21 5:06:44 PM
Comment:
Thanks. Your div works great! The only suggestion I have is to use the display:block and display:none instead of visibility. It works on more browsers.
Title: Some   
Name: Unni
Date: 2005-06-16 3:05:59 AM
Comment:
GOOD
Title: Just what I've been looking for!!   
Name: Charn
Date: 2005-02-22 3:46:16 AM
Comment:
Many thanks Josept.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-05-31 11:05:22 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search