Execution-timed filler page

saintp

If you've searched for flights on Expedia or most of the other big flight-search engines, you've seen the "thinking" screen that pops up while it's searching. (PHPBuilder.com has something similar, but I don't know if it's constant-timed or execution-timed.) I know it's easy enough to do such a screen that's constant-timed (e.g., displays for a set number of seconds), but how do I do one that's just up while the algorithm is executing?

Obviously, I can't do a header redirect, since the headers have to precede any content. So it seems I need to do an HTML or JavaScript redirect, but how to I send a signal from the server to the client to execute a redirect JavaScript? Or am I totally off on my conceptualization of the problem?

BuzzLY

I could be wrong on this... so someone correct me if I am.

Create 3 pages: search.html (or search.php), thinking.php, and results.php. When someone does a search on your search.html page, have your form's action post to thinking.php. thinking.php then redirects to results.php, which actually does the search query, and displays the results of your query. The cool thing is, thinking.php has a neat graphic with blinking lights, or whatever animation you want, making it look like the computer is thinking. It will remain on your screen until the SQL query has returned its results, composed the results.php page, and sent it to the user's browser.

This may happen so fast, that your user never sees the thinking.php page. However, if the query is complex, and the server has a lot of data to go through, the thinking page should come up for a few seconds before moving on to the results.

There may be a more elegant solution, but that's the way I would approach it. Anyone have a better way?

saintp

That makes sense, but I have a clarification and a question:

First, it's not a database query that's taking a long time, although my examples didn't make that clear; it's PHP code.

Second, how do I do that redirect? That's the real question here -- I can't use headers, or meta tags, because the former must precede content and the latter is constant-timed. So the three-pages approach makes sense, but bogs down in the same place as my original quandary: how to do the guts of the redirect.

BuzzLY

Hmmm... I thought that even when in a meta tag, the redirect "timer" would not start until the page was fully loaded. At the very least, the third page shouldn't load until the PHP is done (including the search) and has been sent to the client. At that point, that page will load.

If this doesn't work, you might try creating a form on thinking.php with hidden values. Put Javascript at the bottom of the page that automatically submits that form to the next page. This method has the advantage of being able to use the POST method instead of passing the parameters through the URL.

In summary:

search.php contains your search form.
When the user hits submit, it loads thinking.php
thinking.php has a form with hidden input types, which either a)
automatically submits to results.php via Javascript (at the bottom of the page), or b) uses a meta refresh to load results.php, passing the search parameters via the URL (like a GET).
results.php is calculated on the server, performing the query and parsing the PHP. When it's done and sent to the client, the thinking.php page is replaced with results.php.

I apologize for not having any code... I have not tested this out myself. Please let me know if either of these methods works.

saintp

I ended up using a modified verson of that suggestion: I just used the onLoad property of the body tag, and then didn't finish off the page until all the big, ugly code had executed. That way, when it finished loading, it submitted a form and took me to the next page. Thanks for the suggestions!

nemonoman

Sounds pretty neat. I'd like to see the code.

saintp

It's actually remarkably simple. thinking.php looks something like this:

//NOT ACTUAL CODE!

if (the_right_POST_data_exists()) {
print "<html><head><title>Thinking...</title></head><body onLoad=\"javascript: document.forms[0].submit();\">\n";
display_pretty_thinking_animation();
do_nasty_time_consuming_stuff();
print "<form action=results.php method=post>\n";
//...print out variables...
print "</form>\n";
print "</body></html>";
} else {
header_redirect("search.php");
}

I actually did it modally all on one page (i.e., I set a variable $mode according to whether it was search mode, thinking mode, etc.), but you get the idea from this. This way, the script loaded the "thinking" animation first and let the user stare at that while it did the nasty time-consuming stuff, after which it finished loading the page. (The animation, of course, continued while this happens; not a concern for high-bandwidth types, but it might be for modem-users, for whom the rest of the page might take a few seconds.) As soon as the page is done loading, the javascript redirects it to the "results" page (or mode, as it were). Furthermore, if the user goes to this page without POSTing to it from search.php (e.g., by hitting the "back" button from results.php), then it uses headers to transparently redirect the user back to search.php.

The code is really pretty simple; it was just figuring out how to start, and then it came together.

BuzzLY

VCS 🙂 That's even more elegant than my idea. One place to edit all the code. Well done.