How do I disable Android Back button on one page and change to exit button on every other page
I am developing an Android application using Phonegap that interacts with my Drupal site. I have re-assigned the Android "Back" button to prompt the user to log off from the Drupal server however, I just want it disabled on the login page (for obvious reasons). I can get it to work but only until the user logs out then once on the login page the button remains re-assigned as a logoff button. Here's the code I have so far:
<head>
<script>
/* Wait until device is ready to re-assign Back button */
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyPress, false);
}
function onBackKeyPress() {
/* If the current page is the login page, disable the button completely (aka do nothing) */
if ($.mobile.activePage.attr('id') == 'login_page') {
}
/* Else, execute log off code */
else {
if (confirm("Are you sure you want to logout?")) {
/* Here is where my AJAX code for logging off goes */
}
else {
return false;
}
}
}
</script>
</head>
The problem is that the Back button doesn't get re-assigned. I cannot figure out a way to re-run the above code when the user logs out and ends up back on the login page.
If anybody is willing to provide a solution for this I will be very grateful!
Answer
deviceready is important. If not used, sometimes you can get blocking Back button, sometimes not. Often in debug it works, in production no.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
EDIT 2013-11-03 Common mistake is that development is performed on desktop and cordova script is excluded. One then forgets to include the cordova script for the mobile version.