473,706 Members | 2,626 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

Answer:

Yet another solution. REFERENCE:
http://www.eggheadcafe.com/articles/20050108.asp

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 6018
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
process</a>

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

<title>Loadin g, please wait...</title>
<script>
var ctr = 1;
var ctrMax = 50; // how many is up to you-how long does your end page
take?
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)",
500);
}
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;
}
else
{
indicator.style .width =0;
return 1;
}
}
</script>
</HEAD>
<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" >
<tr>
<td align="center" bgcolor=red width="100%"></td>
</tr>
</table>
</form>
</body>

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
runs.
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

9
2163
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...
5
2350
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...
2
1574
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...
5
4042
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
4
1370
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
1
4114
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...
14
23160
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...
4
5401
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.
0
8781
marktang
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...
0
8697
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,...
0
9285
Oralloy
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...
0
8995
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7908
agi2029
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...
0
5939
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4709
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3149
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2095
bsmnconsultancy
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.