Welcome to AspAdvice Sign in | Join | Help

AzamSharp

Some day I will know everything I hope that day never comes

Syndication

Tags

Navigation

Creating a Wait Message

This little trick I learned while browsing and reading the www.asp.net forums. The trick is about creating the "Wait Message". Suppose, you are uploading a large file or doing any operation which takes long time to complete. Then it is a better idea to let the user know that something is going on. The wait message should appear when the request is being processed and should dissappear when the request has been completed.

Check out the following code:

<div>

Select a file: <asp:FileUpload ID="fu1" runat="server" />

<br />

<br />

<asp:Button ID="Btn_Upload" onmouseup="ShowWaitBox()" runat="server" Text="Upload" OnClick="Btn_Upload_Click" />

<div id="waitBox" class="waitBoxStyle">

Please wait while the file is being uploaded...

</div>

</div>

<script language="javascript" type="text/javascript">

function ShowWaitBox()

{

document.getElementById("waitBox").style.display = 'block';

}

</script>

And here is the CSS file:

.waitBoxStyle

{

background:#FFFF66 url(images/waitIndicator.gif) no-repeat right top;

position:absolute;

top:400px;

left:300px;

right:550px;

font-family:Verdana;

display:none;

}

The heart of this code snippet is the onmouseup event which is fired when the mouse button is up. It will make the div visible and as soon as the page is loaded the div will be invisible again.

 

Sponsor

Published Sunday, November 19, 2006 8:18 PM by azamsharp

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# Web Links 11.21.2006 &laquo; Rhonda Tipton&#8217;s WebLog @ Tuesday, November 21, 2006 8:47 AM

PingBack from http://rtipton.wordpress.com/2006/11/21/web-links-11212006/

Web Links 11.21.2006 « Rhonda Tipton’s WebLog

# Creating a Wait Message @ Monday, November 27, 2006 6:46 PM

Nice tip posted by Azam ! I usually do this with an onclick but this trick is much better and automatic.

help.net

# re: Creating a Wait Message @ Monday, November 27, 2006 11:59 PM

Wow, This is a really good trick

vikram

# re: Creating a Wait Message @ Wednesday, November 29, 2006 11:55 AM

What would happen if the user moved the mouse over an empty area of the page, pressed the mouse button, moved the pointer over the "Upload" button on the page (while continuing to hold down the mouse button), then released the mouse button? Would the "waitBox" display without the Btn_Upload_Click method actually being called?

Jon Schneider

# re: Creating a Wait Message @ Wednesday, November 29, 2006 12:01 PM

Try it out and let me know what happens!

azamsharp

# Freeze Page While Processing @ Sunday, December 10, 2006 11:45 PM

In one of my previous postings I explained how you can notify the user that the processing is going on

AzamSharp

# re: Creating a Wait Message @ Friday, September 28, 2007 4:35 PM

Hey AzamSharp, You are realy very sharp! It's nice trick and useful. Thanks, I am using it with small customization.

Sampat

# re: Creating a Wait Message @ Thursday, October 18, 2007 7:16 AM

Thank“s. I forgot that I can use a OnMouseUp Event in a asp button control. This code help me a lot.

Leandro Oliveira

Leave a Comment

(required) 
required 
(required) 
Enter the code you see below