Browse DevX
Sign up for e-mail newsletters from DevX


Sneaky ASP Tricks Part 1: Display Progress During ASP Page Processing

This article explains how to display a progress indicator in your ASP page when it is processing.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

hat's a Sneaky ASP Trick? It's a simple, elegant non-traditional solution to an ASP development issue. This article explains how to display a progress indicator in your ASP page when it is processing. "Can't be done," you say? It can, with a Sneaky ASP trick.

Let's say you have an ASP page that is doing some processing before outputting data. You might be accessing a database, running a query, and formatting your data—all of which takes time. When this is going on, your user could be viewing a blank page with the browser's top right hand corner icon spinning (or whatever else it does). There will be an hourglass cursor on this page so the user knows something is happening. But frequently, if users do not get a visible response in a few seconds, they may go away from your page. So how do you display a progress bar on your page?

The answer is very simple and sneaky. It requires using some space on your resulting page to display a progress bar. In this space, display an animated GIF that mimics a progress bar. When your processing is all done, just make this progress bar disappear. Simple, no?

Let's see this in action with an example. Let's say you have a reporting application, in which the user asks for a report, inputs the necessary parameters for the report, and then hits the submit button. Your ASP page goes to work generating the report and then outputs the data—after a very long time. During this time, you want your user to view the progress bar. This is how you would do it....

  1. Make sure your ASP page (the one that does the processing) outputs the top Title of your report. In this space, we will also include an image as follows:

    <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY ...some code here...> <TABLE BORDER="0" WIDTH="100%"> <TR> <TD COLSPAN="1" ALIGN="LEFT"> <IMG SRC="rpt_prog_bar.gif" WIDTH="141" HEIGHT="21" HSPACE="0" VSPACE="0" BORDER="0" NAME="ProgBar" ALT="Generating Report, Please Wait..."> </TD> <TD COLSPAN="1" ALIGN="CENTER"> <FONT SIZE="4" COLOR="BLACK" FACE="Arial"> A Sample Activity Report</FONT> </TD> </TR> </TABLE>

  2. In the above code, the <IMG SRC="" ...> points to a special animated GIF (rpt_prog_bar.gif). This image has been created to give the effect of a progress bar in motion. This is what it looks like:

  3. Continue your processing, outputting your data as and when it is ready. During all that processing, your user is viewing the progress-bar GIF and is therefore occupied.

  4. When you have finished your processing, and your data is sent back to the browser, the page's ONLOAD function kicks in. In the <BODY ONLOAD=""...> tag, you have specified a piece of JavaScript code that makes your image disappear. This is done with this line of code:

    <BODY BGCOLOR="#FFFFFF" ONLOAD="if (document.images) document.ProgBar.src='spacer.gif';">

What happens is that when the page is done processing, and all data has reached the browser, the animated GIF is replaced by a different GIF—a blank, single pixel GIF that essentially makes the animated GIF disappear! And voilá, when your page is in processing stage, you have a progress bar. When the processing is done, it disappears.

To see a working example of this, browse to www15.brinkster.com/theasppro/10minProgress.asp. Click on the link at the bottom to view the Sneaky ASP Trick in action.

Rama Ramachandran is the Vice President of Technology with Imperium Solutions and is a Microsoft Certified Solution Developer and Site Builder. He has extensive experience with building database systems and has co-authored several books including "Professional Visual InterDev 6 Programming" and "Professional Data Access" (Wrox). Rama teaches Visual Basic and Web development at Fairfield University and University of Connecticut.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date