HTML: "Please wait" loading page with redirect, cross browser, standards compliant

Question

Hi,

I have the common problem of implementing a "Please wait, processing your request" page in HTML to show to the user while a long running task is processing. Specifically, I am creating an order and billing a credit card.

Currently I am first loading PleaseWait.html showing a message and a spinner, which straight away redirects to Process.html, which does the processing. Once Process.html has finished, it redirects to Complete.html.

I am trying to do this completely cross browser and following all the recommendations. This means the following techniques should be avoided:

• Javascript redirect, as the user could have disabled scripting
• META Refresh, as this is discouraged / deprecated, and I think some browsers also allow the user to disable it
• Sending an HTTP 301 response, as this causes the browser (at least, IE) to not render the Please Wait page at all
• using a hidden iframe to hold Process.html, as again I believe this will require javascript to detect when the processing has completed

So my question is... how the hell do I accomplish this?

Bonus points (well, kudos at least) if the solution enables my animated GIF to continue to animate during the entire processing stage. I mention this because it seems that in IE, when PleaseWait.html redirects Process.html, all animations are stopped, which means that my spinner currently only spins for half a second or so, then stops while the Process.html is loaded page does its thing.

Answer 1

may be you can do this use AJAX.

Answer 2

That's a pretty harsh set of constraints! Without JS, I'm fairly certain you are back in the world where actions need to be preformed by the user :( In that world... you might as well just have a 'check and see if your order is done' link for the user to click on.

I think that most would argue that it's safe to assume that 'basic' javascript should be 'allowed' in most scenarios. By basic I mean things like setTimeout() and window.location. If you can use those basic commands you can have the page re-load itself every 5s or so. Have the page hit 'isUserDone.php' which will redirect the browser if it should go back to the 'processing' page or the 'complete' page. You can use the header function in PHP header('Location: complete.html') to have the script tell the users's browser to go to a different (or the same) page.

Answer 3

I'd use the meta refresh - I'm not sure why it's considered deprecated - it's part of the HTML5 working draft - it looks like it's here to stay:

http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-meta-http-equiv-refresh

Of course you can provide a link for users to click that reloads the page in case META REFRESH doesn't fire. Just to be safe, send an email with a link to re-enter payment info when a transaction fails.