Building a Better Busy Box - Ver 1.2
(Processing… Please Wait)
Mark Wagner
Castle Rock Software, LLC
http://blogs.crsw.com/mark
February 16, 2005
Updates
- February 16, 2005 - Rewrite to use an IFRAME instead of a DIV tag.
- January 7, 2005 - Fixed z-Index attribute.
- November 13, 2004 - Original article
Summary: We often need to provide a user message informing the user that their request is “processing”. Like the hour-glass mouse pointer lets the Windows user know the system is busy processing their last request, I have a simple, clean, and effect solution to providing this on web pages.
BusyBox Demo
http://blogs.crsw.com/mark/samples/BusyBoxDemo/Default.aspx
Article source and sample code links
This article is located at: http://blogs.crsw.com/mark/articles/642.aspx
Source code sample at: http://blogs.crsw.com/mark/files/BusyBox-1.2-Demo.zip
Technologies employed
- JavaScript
- HTML (ASP.NET)
Supported browsers
- Internet Explorer 6
- Netscape Navigator 7.1, 7.2
- Firefox 1.0
- No other browsers have been tested
Introduction
Anyone who has used the Internet for more than a few hours has encountered times when the “Internet” is being slow. I use the term “Internet” in jest here since it is often the term used when websites are not responding as quickly as we would like. As most of us know, the problem is more often caused by an over-worked website, one that is unable to handle its current workload. This article does not address any performance issues as that is a much larger topic for another time. However, for those well designed and well cared-for websites there are very acceptable times when displaying a “processing” message to the user is very helpful and very appropriate.
I have certainly experienced times; as I am sure you have, where after clicking a submit or search button I began to wonder if the web server was going to process my request successfully. Why shouldn’t it. I didn’t expect it to take more than a second or two. Performing functions like a search, report generation, or the processing of a large order, can often take more time than we would like. These predictably slow responding places in an application are ideal candidates for user feedback in the form of a processing message. As long as your website is not normally slow, your users will appreciate being notified of potentially long running processes.
There are a number of different approaches to accomplishing this. One of the more common methods is to navigate to an intermediate page where an animated image and/or message are presented to the user. The intermediate page then immediately initiates the process of navigating to the long-processing page. This allows the intermediate “please wait” page to be displayed to the user while the long-processing target page is crunching away. When the target page completes its long process it then begins rendering to the user’s browser, thus replacing the “please wait” message. While this technique works well when navigating from page A to page B, it does not work well when a post-back (from page A to page A) is needed. Additionally, having the benefits of things like ViewState become discarded.
My Approach
The approach I am about to cover functions just as well during a post-back as it does when navigating from page X to page Y. Moreover, there is no need (or desire) to have an intermediate processing page. If you are using a custom base page for your application; (i.e. a MasterPage), it becomes even easier to user. I have added this to my personal CastlePage class making it very easy to use at anytime.
My approach is to pre-load my busy box message in a hidden IFRAME tag on any page that will navigate (or post-back) to a potentially long running process. After all, my busy box message has a pretty small code footprint. The page will begin it’s unload process whenever the browser posts to a new page or performs a post-back. By placing JavaScript code in the onbeforeunload event of the body tag I can instantly reveal the busy box message to the user. Since this is part of the original page it will display immediately and remain visible until the new page completes its processing and begins to render in the user's browser. Best of all, this works great with post-backs too.
Click here for the complete article.