1

I'm looking for a way to either disable the back button (hardware on Android, software on iPhone), or redirect the user to a different page (then the one that was previous).

My reasons for this aren't for nefarious purposes or anything. I'm working on a piece of exam software. A user answers all the questions in an exam/survey/quiz, submits the form, and is then taken to a page to see the feedback. At the moment, if they hit the hardware back button they get the alert box stating that the data has already been submitted, but they can still hit OK and be taken back to the exam and resubmit it, thus resubmitting either the same results or changing their answers and resubmitting.

I am looking for a way to disable this ability, either by disabling the back button somehow, or by redirecting the user to a new page.

A little bit of information regarding the app. The exam form is being submitted not using Ajax. The entire app is one URL, no matter what page you are on, the URL is always the same. By reloading that URL, you are taken to the login page (this is perfectly acceptable).

I've already looked into the HTML5 History capabilities, but because of it's lack of support in newer versions of Android, I can't use it. I need something that will work across Android, iPhone, and preferably Windows Phone 7.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Arak Tai'Roth
  • 408
  • 1
  • 7
  • 24

4 Answers4

4

There is no real way disable the hardware back button on the BlackBerry or Android.

What you can do is maintain a session variable which gets invalidated in your back handler and check for that session variable in the pagebeforeshow event of the Exam page.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nirmal Patel
  • 5,128
  • 8
  • 41
  • 52
  • Thank you very much. That solved my problem. Not sure why the other events in jQuery Mobile wouldn't fire, such as pagebeforeload, but that one fired and did the trick. It's not quite as nice as I would like, as the exam is still shown again before it actually changes the page to what I want, but it does work. – Arak Tai'Roth Jul 12 '12 at 00:03
  • 1
    page-x-load events are fired only once in the lifecycle of the page - when JQM first loads a particular page into DOM... for subsequent transitions - since the page in already in DOM only the page-x-show events are fired. – Nirmal Patel Jul 12 '12 at 07:52
  • 1
    in pagebeforechange you should be able to change the target page to prevent the exam page from being displayed at all. – Nirmal Patel Jul 12 '12 at 07:54
  • pagebeforechange doesn't work in my case. It loads to a white screen with the loading indicator in the middle and just stops doing anything. Likely it's a conflict with something else in the application. – Arak Tai'Roth Jul 16 '12 at 16:17
1

Slightly related to the problem, if you are using jQuery Mobile with Cordova/PhoneGap, you can listen to an event fired called "backbutton". Make sure to bind this after "deviceready".

Example below:

document.addEventListener("backbutton", function (e) {
    e.preventDefault();
}, false);
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
dbcole
  • 63
  • 1
  • 1
  • 6
0

You should be able to capture the hardware back button click event with JavaScript:

$(document).bind('keydown', function(event) {

  if (event.keyCode == 27) { // 27 = 'Escape' keyCode (back button)
    event.preventDefault();
  }
});
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Pablo
  • 2,834
  • 5
  • 25
  • 45
  • This is identical to the answer to *[Take control of the hardware back button jQuery Mobile](https://stackoverflow.com/questions/12859759)*. – Peter Mortensen Aug 31 '21 at 16:15
-1

To disable the Back button in jQuery Mobile, include data-backbtn="false" in the header div of your page.

You can test the same on http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-headers.html

And in order to modify the functionality, you can have something like this:

<a href="/#default" data-icon="back">

This shall redirect you to the default page every time.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jigar Pandya
  • 6,004
  • 2
  • 27
  • 45
  • 1
    I'm not talking about disabling the back button in the header. I'm talking about disabling the ability to go back. – Arak Tai'Roth Jul 11 '12 at 05:25
  • It still doesn't help. That adds a back button that I can control, which is good. But it still leaves the hardware back button uncontrolled, which means a user can still go back to the exam and re-submit, thus changing his/her scores. – Arak Tai'Roth Jul 11 '12 at 06:21
  • I think unless you are doing device specific application - not web application you can not control the hardware back button. I tried various options last night bt can't help. I mean that is my view. Please provide yours – Jigar Pandya Jul 12 '12 at 04:59