0

I am supporting an e-commerce app, which pretty much makes and submits orders.

A user found that if they submit their order, and press back really quickly, they can cause an error condition.

I want to prevent this. When the user clicks submit, I want to bind some kind of event to the browser's back button that instead will redirect them to the Index page. However, after about two hours of Googling (including a few StackOverflow topics), I have not found any clear way of influencing the behavior of the back button.

I briefly attempted to use history.pushState(), but as the HTML 5 documentation mentions, that will not cause a redirect; it merely alters the displayed URL/state.

Similarly, the history.onpopstate event appears unhelpful, because it occurs whenever a state is removed from the history listing; I'm looking for an event that occurs whenever the history listing is traversed backwards.

Question: Does an event for the browser's back button, or at least a way to prevent this particular stupid user trick exist?

Andrew Gray
  • 3,756
  • 3
  • 39
  • 75
  • 2
    You should fix your site so that this doesn't break in the first place. – SLaks Jun 10 '13 at 16:26
  • Can you please add an explanation of the error? – Dark Falcon Jun 10 '13 at 16:26
  • 1
    Try the answer to this question: http://stackoverflow.com/questions/6063522/jquery-beforeunload – cfs Jun 10 '13 at 16:27
  • @SLaks - That is not possible. The reason is, when this app is building an order, you can do whatever you want without ill effects. **However**, once you press the 'Submit Order' button, you've crossed the point of no return; the status of the order changes, and that status prevents the order from being revisited. – Andrew Gray Jun 10 '13 at 16:27
  • @AndrewGray then why not have the page say something like `"Error: order is already submitted"`? – Halcyon Jun 10 '13 at 16:28
  • @FritsvanCampen - That's the error they're complaining about, that I'm trying to prevent them from being able to get. If it's not possible, I could have a talk with my chain about helping users to not make bad decisions, but I don't see that going far. – Andrew Gray Jun 10 '13 at 16:29
  • You can't always revoke an action once you've made it. You can't unsend an email. You can't unprint a document. Pressing the browser back button shouldn't be the trigger to revoke an order. – Halcyon Jun 10 '13 at 16:33
  • I'm not trying to revoke the order; it's done, permanent, and gone. I'm trying to redirect the users so they're not convinced they've tricked our app. – Andrew Gray Jun 10 '13 at 16:36
  • 1
    Check this out: http://stackoverflow.com/questions/11379411/how-can-i-detect-the-back-forwards-buttons-being-clicked-when-using-history-js – Ezequiel Gorbatik Jun 10 '13 at 16:43
  • Voting to close this. First, it seems this question has been asked before, in different forms. Second, it seems there presently is no way to actually redirect the back button. Finally, I'll have a talk with my leadership about what to do in this case, because the Submit Order button is the point of no return; when crossed, **it is crossed.** Thank you all for your feedback and support. – Andrew Gray Jun 10 '13 at 16:50
  • 1
    @AndrewGray: Why don't you just perform a redirect instead of showing that error? – SLaks Jun 10 '13 at 17:54
  • @SLaks: There are other, potentially valid ways of encountering that error in the application; a submitted order **is submitted**, and thus beyond the purview of (most of) this app. – Andrew Gray Jun 10 '13 at 18:42

2 Answers2

1

You can't listen to the browser back button because it's outside of your reach (it's not part of the DOM).

What you can do is fix the previous page so that it detects if you've used the back button.

Without more information I can't give you any tips on how to achieve that.

Also, an error condition is not necessarily a bad thing. Just make sure it's clear what is happening: the error message should make sense.

Halcyon
  • 57,230
  • 10
  • 89
  • 128
1

Wrong answer... Instead listen to window.onBeforeUnload and ask the user if he knows what he is doing. Return false if not. This is usually done via a confirm dialogue

Jörn Berkefeld
  • 2,540
  • 20
  • 31
  • I really, really like this answer. Sadly, I know for a fact I can't get away with it! Even then, what will stop the user from lying to the prompt? :( – Andrew Gray Jun 12 '13 at 20:59
  • 1
    i guess it depends on your use-case. normally, this is used to inform the user about unsaved work and not to force him into doing something (which the browser probably would notice anyways and prevent). If you need to save data, do it right after something is hidden from sight, mobile style! save buttons are the past anyways. you can use localstorage (if offline needs to be supported) or any server-api for that – Jörn Berkefeld Jun 13 '13 at 09:42