Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: incrediBILL

Message Too Old, No Replies

Create a waiting/loading page for processing long requests

create loading page

     

jclark42796

9:40 pm on Mar 29, 2004 (gmt 0)

10+ Year Member



I would like to create a page that has a "waiting" or "loading" animated gif that is displayed while a report is being generated. Similar to what Priceline or Expedia do when they are trying to find a flight for you.

I've tried using iframes. When I first experimented with an iframe going to a static page, the behaviour worked as expected. However, once I started going to dynamic content, i.e. servlet/JSP, my "waiting" image stayed on the page along w/ the report.

How do display the image and when the processing is complete, display my report in a new page without the image on the page? I'm sure this is covered in some FAQ or site, but have been unsuccessful in locating any info. I'd appreciate any help on this.

TIA,

Jim

digitalv

9:59 pm on Mar 29, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Even though everyone (here) hates META refreshes, it would do the job.

Instead of having the form post directly to the script that is processing the request, have it post to another page. Design that page to look like the "please wait" but do a META REFRESH in that other page to the URL you were originally posting to with their form data in the querystring.

Then just modify your original posturl (if necessary) to request from the querystring instead of the form.

WeirdoPL

10:56 pm on Mar 29, 2004 (gmt 0)

10+ Year Member



Wouldn't that make things even longer? Not only would You have to wait for the process to finish wroking, but also You would have to wait for the META refresh to occur beforehand.

I think the question is: how to display an animated gif WHILE the process is running and how to make it dissapear after it's finished it's tasks...

buzzmaster

11:06 pm on Mar 29, 2004 (gmt 0)

10+ Year Member



What about something like this:
--------------------------------
<head>
<script language="JavaScript">
<!--
function hideLoadingPage() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
function showLoadingPage() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'show';
}
else { // IE 4
document.all.hidepage.style.visibility = 'visible';
}
}
}
// End -->
</script>
</head>
<body onload="hideLoadingPage()">
<div id="hidepage" style="position: absolute; left:0px; top:0px; background-color: #FFFFFF; layer-background-color: #FFFFFF; height: 100%; width: 100%; visibility:hidden">
<table width="100%" height="100%"><tr><td align="center" valign="middle">
<table width="50%" align="center" style="border: 1 #666666 solid"><tr><td align="center" class="row1">
<br /><b>We're processing your request... please wait!</b><p><img src="images/loading.gif"></p><br />
</td></tr></table>
</td></tr></table>
</div>

<script language="JavaScript" type="text/javascript">
<!-- // Begin - put this in JS so that non-JS enabled browsers won't see it (requires JS to remove)
showLoadingPage();
// End -->
</script>

<!-- JSP/PHP/whatever -->

</body>

jclark42796

1:44 pm on Mar 30, 2004 (gmt 0)

10+ Year Member



WeirdoPL did a better job asking the question than I did:

I think the question is: how to display an animated gif WHILE the process is running and how to make it dissapear after it's finished it's tasks...

That is exactly what I want to do.

To make things complicated, the script (a struts servlet) I'm calling returns a PDF in the form of a byte stream so the browser usually handles the mime type.

Maybe the way priceline and others do it is that the resulting page (the page that is processed) manipulates the surrounding objects (animated gif, text, etc), e.g. hides them. I'd think there would be some kind of pattern on doing this sort of thing.

Thanks to all that replied.
Jim

bcc1234

1:55 pm on Mar 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have it request the same URL twice (with meta-refresh).

If the visitor hits it the first time, display the waiting page, start the processing, and set some attribute in the session.

If the request comes in again (has that attribute set), then check that session attribute - if the corresponding report is ready then display the report, if not - then display the same waiting page again.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month