How to make a &quot;standby&quot; page

How to make a "standby" page

Mucello

In theory, this is a simple concept... but I'm not quite sure how to do it.

I have a form where users select various parameters and hit submit. Then they wait and wait because often times, the resulting query can take upwards of a minute (lots of data).

What I want is to have a "standby" page that says something to the effect of "compiling data... bla bla bla" and eventually shows the results when its done. What I want would be analogous to that of Orbitz.com when you search for travel information... they show a page that atleast lets you know something is happening while it searches for stuff.

Any idea how I can do this? I can't figure it out because somehow I have to show a new page while the query is still running.

PyroX

You have options,

I think a good options is to put a div in, and use CSS to make the style:

.mydiv
{
display:none;
}

<div class="mydiv">(query results)</div>

Put this div in the very very bottom of the page, right before </body>.

Absolute position this div at 0,0 with 100% width and height ( no margin ).

Remember it will not be visible or take up space because of the stylesheet.

Inside this div, the output should be generated, and after the input generation is complete, it should have javascript to set the div display mode to 'block'.

So, the flow of the code would be:

1) output page with 'please wait' text
2) flush();
3) process query and put results inside div
4) javascript makes div visible
5) flush();

all from the same php script, all at the same time.
you may want to toss in a sleep(1); and another flush(); after the first flush(); for good measure

Because the div is processed and filled last, the restof of the page will be visible using the flush();

Another option is to hammer the output buffer.

Problems with this approach?

The main 2 problems are:
1) some browsers may not support the javascript required for making the div visible. Your layout has to be well planned, a lot of browsers will not display content until the rest of the element is complete, this usually does not include the body or html tags.

2) Because you are essentually making 2 complete pages inside one, the page size can become very very large. Try to keep graphics and layout to a minimum, and limit query results to a few hundred.

Another option would be to the php write to a file the output that would go into the DIV, and load that when complete ( cuold be setup as a cache of queries that have already been run in the last X minutes, etc, and really be tuned into a fine machine.

There are more ways to do this I am sure. I am not sure if my 2 examples are the best.

PyroX

I have never been real good at putting my code thoughts to text, so here is a functional example.

I have tested this using:

Webservers:
Apache

OS:
Linux

Browsers:
IE 6
Mozilla 1.3
Opera 7.21

Works 100% of the time for me.

NOTE: the SLEEP(5); is only there to pretend like a slow query, replace the SLEEP(5) with your database query and output generator code.

<?
echo '<html>';
echo '<head>';
echo '<title>test1</title>';
?>
<style>
body{
margin:0px;
}
.dyndiv{
display:none;
background-color: #c0a0a0;
border: solid 1px #000000;
color: #000000;
margin: 0px;
padding: 8px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style>
<?
echo '</head>';
echo '<body bgcolor="#cccccc">';
echo '<center><h1>Please Wait...</h1>( Your document is on the way )</center>';

flush();

echo '<div id="dyndiv" class="dyndiv">';

echo 'content here';
SLEEP(5);

echo '</div>';
echo "<script>document.getElementById(\"dyndiv\").style.display='block';</script>";
flush();
echo '</body>';
echo '</html>';
?>