1

I have a page that contains an HTML form that submits back to itself once the user clicks a link in a list of returned search results. Once they click the link, the page takes the submitted variables, runs a bunch of searches on various external APIs, parses a bunch of data, and adds a bunch of stuff to the database, then redirects to a new page that has been created from that data.

All the searching and parsing can take up to six or seven seconds; I'd like to be able to show the user a "Please Wait" kind of message while all that work is happening behind the scenes.

Trouble is, I can't show and hide a DIV because it will screw up my PHP redirect if I've already generated output before the

header('Location: ' . $newURL);

command. I've searched around for answers but while there are many that are similar, none of them are close enough to my specific situation that I can hack around them.

I'd be grateful if someone could point me in the right direction.

Updated version which now works, courtesy @Izkata from his comments below:

jQuery("a").bind('click', function() {
  jQuery('#feedback')[0].innerHTML = 'Searching, please wait...';
})

Turned out what I needed to do was assign bind a the message to the click of a link, not to 'submit', as submit was looking for form data.

Julien Poulin
  • 12,737
  • 10
  • 51
  • 76
Neil
  • 95
  • 1
  • 1
  • 8
  • 1
    You can use javascript to do redirection. – hjpotter92 Oct 11 '12 at 15:48
  • User clicks submit, then you show your please wait whilst you have posted the form with ajax, then on success responce use javascript to redirect to the results page. – Lawrence Cherone Oct 11 '12 at 15:49
  • possible duplicate of [How can I make the browser wait to display the page until it's fully loaded?](http://stackoverflow.com/questions/1435015/how-can-i-make-the-browser-wait-to-display-the-page-until-its-fully-loaded) – mario Oct 11 '12 at 15:52

3 Answers3

4

The simplest way I can think of doesn't require the server to do anything:

<div id='wait_message' style='display: none;'>
   Please wait while search is in progress...
</div>

...

$$('.links').observe('click', function(e) {
   $('wait_message').show();
});

(Event is written using Prototype.js; you should use whatever is appropriate (JQuery/mootools/etc))

Using the example page in the comments, this works - it runs in Firebug, so just putting it on your page somewhere should work just fine.: 
jQuery('#newMovieSearchForm').bind('submit', function() {
   jQuery('#feedback')[0].innerHTML = 'Searching, please wait...';
})

There's probably a jQuery-way to update the text instead of using innerHTML, but I don't know it - we don't use jQuery here.

Izkata
  • 8,961
  • 2
  • 40
  • 50
  • Won't the
    count as output that will mess up the PHP redirect, even though it's not displayed yet?
     – Neil Oct 11 '12 at 15:58
  • 1
    Now I get this - if I do this PLUS the Javascript redirect, it might be the best option. Will test it. – Neil Oct 11 '12 at 16:03
  • @Neil Yep, I think that's what I meant. The question didn't seem completely clear to me (including the redirects, is the browser seeing 3 pages?), which is why I suggested one that doesn't touch the server at all. Add (a version of) this to the page with the list of links, and do all the time-consuming stuff before the browser loads anything else from the server. There's a chance the browser will show a blank page while the search is in progress, but I think that only happens if headers get sent... – Izkata Oct 11 '12 at 16:50
  • @lzkata The browser only sees two pages - it sees the search page, which reloads and does the time-consuming stuff after they click a link on it, and after the time-consuming stuff is done, it redirects to a second page. So I guess it DOES see three pages, but it sees the first page twice. That said, your answer, while seemingly nailing the answer, is a touch over my head. I'm wading through tutorials and such to figure out how to implement it properly. – Neil Oct 11 '12 at 16:54
  • @lzkata You can see a similar page to what I'm working on (although this one's in its infancy) if you go here: [link](http://dadditudes.com/movie-search/) As you'll see, the processing takes forever, and I just don't want the user to click another link impatiently. The way it is now is just too bush league. – Neil Oct 11 '12 at 16:56
  • @Neil Ohh, so you are using an AJAX call? That makes this not quite correct, IMO... Give me a minute or two. – Izkata Oct 11 '12 at 17:05
  • Uploaded it to the test server, not working. Will keep playing with it. Thank you for the help. – Neil Oct 11 '12 at 17:25
1

You are right, you won't be able to output data to the screen and then try to redirect afterwards using PHP. You could accomplish this by echoing JS:

echo 'Please wait...';
// Time-intensive PHP here
echo '<script>window.location = "new-location.php";</script>';
Jason
  • 1,192
  • 7
  • 8
0

You can do something like this:

First, take care of output buffering, i.e. you want php to display output as it executes - you don't want it to buffer.

That way, you can output some html that will show a "loading.." sort of thing.

And, will wait for the script to end it's execution.

Once, you are done with php, redirect using a meta tag, something like:

echo '<meta http-equiv="refresh" content="5;URL=\'http://example.com/\'">';
Prasanth
  • 5,230
  • 2
  • 29
  • 61