473,735 Members | 2,067 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to display progress bar for long running page in Javascript

Query: How to display progress bar for long running page


Yet another solution. REFERENCE:

My only regret is that when click the browser back button, it loads the
progress bar again.
Any solution to this?

Feb 4 '06 #1
1 6023
here is the code

------Article highlights

There are probably half a dozen or more ways to accomplish this task,
including using a hidden IFRAME with Remote Scripting, using the
XMLHTTP COM object from the client side (a technique that is actually
used in ASP.NET 2.0 with partial page caching and callbacks), using
popup windows, and other little tricks. The one I present here is one
of the simplest. It uses an intermediate page with some timed script on
the client side that has actually loaded the destination page with the
long running process in the background. All you do is have a button or
hyperlink in the page that wants to call the long - running page which
really loads the intermediate script page, and has the real destination
page on the querystring, like so:

<A HREF="ProgressP age.aspx?destPa ge=EndPage.aspx ">Kick off long running

The "ProgressPage.a spx" has client script that looks like this:

<title>Loadin g, please wait...</title>
var ctr = 1;
var ctrMax = 50; // how many is up to you-how long does your end page
var intervalId;
function Begin()
//set this page's window.location .href to the target page
window.location .href = "<%= Request.QuerySt ring["destPage"]%>";
// but make it wait while we do our progress...
intervalId = window.setInter val("ctr=Update Indicator(ctr, ctrMax)",
function End() {
// once the interval is cleared, we yield to the result page (which
has been running)
window.clearInt erval(intervalI d);

function UpdateIndicator (curCtr, ctrMaxIteration s)
curCtr += 1;
if (curCtr <= ctrMaxIteration s) {
indicator.style .width =curCtr*10 +"px";
return curCtr;
indicator.style .width =0;
return 1;
<body onload="Begin() " onunload="End() ">
<form id="Form1" method="post" runat="server">
<div align=center><h 3>Loading Data, please wait...</h3></div>
<table id=indicator border="0" cellpadding="0" cellspacing="0"
width="0" height="20" align="center" >
<td align="center" bgcolor=red width="100%"></td>

What the above script does is as follows:

In Body onload, Begin() is called. This immediately sets the
location.href property of the window to the final page, which begins
loading immediately in the background while the rest of the script
We set the intervalId variable to the call to
window.setInter val("ctr=Update Indicator(ctr, ctrMax)", 500); which sets
a timed call to the UpdateIndicator method every 500 milliseconds.
UpdateIndicator increments the ctr variable and increase the DHTML
width of table "indicator' to the value of ctr * 10 pixels. This is
client side DHTML code so it executes in the browser immediately.
When the target page has completed loading, the onUnload event is
called and the interval timer is cleared in the End() method Your end
page will then take over and you will see the result.
In my Endpage.aspx, the page with the long running process, I've put in
a routine that actually does some real work that takes time (instead of
Thread.Sleep(xx x) which most examples would show):

private void Page_Load(objec t sender, System.EventArg s e)
//Kick off your long running process here...
// this is just a surrogate for whatever long running
//process your page does.
Response.Write( "<ul>");
WebClient wc= new WebClient();
for(int i= 1; i<40;i++)
byte[] b=wc.DownloadDa ta("http://www.microsoft.c om");
Response.Write( "<li>Got Microsoft " + i.ToString()+" Length: " +
b.Length.ToStri ng());
Response.Write( "</ul>");

The above code uses the WebClient class to request the Microsoft home
page 40 times, and each time the result comes back, it adds a line with
some info to an unordered list.

The result of all this is that when the user clicks the link to go to
the long-running page, they will first see our Progress page with a red
indicator that steadily increases in width until the target page has
completed processing:

Feb 4 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Brian Roberts | last post by:
I have a command line Python program that sometimes takes a bit (several minutes) to run. I want to provide an optional method for an impatient user (me!) to check the status of the program. The type and amount of status information doesn't fit nicely into a --verbose or logger -- either too little or too much information at different points. I think an optional web page would be convenient interface. The Python program would listen...
by: GB | last post by:
Okay, here is what I am trying to do We have a dialog of windows that collects information for generation of a dynamic HTML report. The last page in the wizard dialog accepts all report options (in XML format) and calls a business tier object in the pageLoad event, which creates the HTML report file. This file is then streamed to the client This process works well, and whilst we have tuned it to death it still takes between 1-5 seconds...
by: Roy Chastain | last post by:
I have a aspx web page that is a long running task (1 - 2 min's). I would like to display an actual progress such as X out of Y items processed. I assume that the correct way to start about this is to put a meta refresh in the page (say every 10 seconds) to force the page to get the new output, but I am not sure where/how to generate the new output and which if any events etc get fired when the page refresh is requested. Could someone...
by: Homa | last post by:
Hi all, Can anyone give me some links about how to do an async web service call from aspx and display a temperary page before the web service returns? Thanks, Homa Wong
by: pamelafluente | last post by:
I have an animated gif in an image control: Me.ImageProgress1.Visible = False I want that when the User click on a given button to execute a long task Me.ImageProgress1 become visible until the task on the server is finished. I call the task this way: Protected Sub ButtonSomeLongTast_Click(ByVal sender As Object, ByVal
by: daniel_xi | last post by:
Hi all, I am running a VS 2003 .NET project on my client machine (Win 2000 SP4, ..NET framework 1.1), running an ASP.NET application on a remote web server (Win 2000 Server, IIS 6.0, .NET framework 1.1). The application implements a Progress Bar webcontrol, that pops up in a window, using the HttpHandler interface, on the event of a button click. The handler's process request routine reads the status of the progress by querying the...
by: lmttag | last post by:
Hello. We're developing an ASP.NET 2.0 (C#) application and we're trying to AJAX-enable it. We're having problem with a page not showing the page while a long-running process is executing. So, we're looking for a way to display the page with a "please wait..." message while the process is running, and then, when the process is done, update the page with the actual results/page content. We have a page that opens another browser/page...
by: Simon | last post by:
If I am running a long time query, how to show a wait page at then? Is there any recommended way to do it? Thanks.
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.