views:

444

answers:

2

Hey all,

My checkout cart displays (1) an animation for "Processing Order..." after the 's been (2) submitted and the card is being processed in a php script. However, there's a bug triggered when the user has reached the "order accepted" page, and pressed the back button. The "Processing Order..." animation is still displayed.

(1) The processing display is shown like:

<div style="position:absolute;display:none;" id="animation">
    <img src="animation.gif"/>
</div>

(2) When the button is submitted, the javascript used:

onClick="document.getElementById('animation').style.display='block';
         document.the_form.submit();"

So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.

When the user clicks back, we should expect a page without the animation. But, onLoad isn't triggered, and the last state of the animation (displayed) is saved.

Any idea how to remove the animation when the user returns to the page?

A: 

In most modern browsers, clicking back doesn't reload the page, it just displays it from memory as it last remembered it (as this is likely to be the desired behaviour).

In my limited experience of UI design, I'm not sure why you would want users to click the 'back' button after submitting an order, instead you should provide a link that takes them forward to the next task they may wish to complete, or, forward them onto a new page that has useful tasks and simply displays a message somewhere that says "Thanks, your order is accepted".

MalphasWats
AKA kill the "Processing Order" message just before forwarding them to the new page. Then it won't be there if they DO decide to go back.
Adam A
A: 

Inspired by Adam A's comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn't shown.

One way to achieve this is adding the hiding code to HTML body's onunload event.

<body onunload="document.getElementById('animation').style.display='none';">
Jawa