How do I disable Android Back button on one page and change to exit button on every other page

Question

How do I disable Android Back button on one page and change to exit button on every other page

42.6k views Asked by ObsoletePower At 09 October 2012 at 00:32

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!

Original Q&A

There are 4 answers

**user2028084** · Answer 1 · 2013-12-13 12:45:48

user2028084 On 13 December 2013 at 12:45

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.addEventListener("backbutton", function (e) {
        e.preventDefault();
    }, false );
}

**OSP** · Answer 2 · 2013-08-27 12:29:07

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.

**Baha' Al-Khateib** · Answer 3 · 2016-04-18 14:24:15

You have to override back button action in device ready... here is a full working example "index.html"

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" type="tex`enter code here`t/css" href="style.css">
    <script>
        function getTitle() {
            document.getElementById("ct").innerHTML = "DEMO: " + document.title;
        }
    </script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        getTitle();
    }
    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // Handle the back button
    //
    function onBackKeyDown() {
        alert('Backbutton key pressed');
        console.log('Backbutton key pressed');
    }
    </script>
  </head>
  <body onload="onLoad()">
  <ul id="nav">
        <li><a href="index.html">&larr; Back</a></li>
        <li><a href="#" id="ct" onclick="location.reload();"></a></li>
    </ul>
  </body>
</html>

I used this code and back button is overridden finally....

Ref--> https://github.com/amirudin/PhoneGapPluginDemo/blob/master/www/evt-backbutton.html

**A. Magalhães** · Answer 4 · 2012-12-26 15:56:27

Try this:

document.addEventListener("backbutton", function(e){
    if($.mobile.activePage.is('#login_page')){
        e.preventDefault();
    }
    else {
        if (confirm("Are you sure you want to logout?")) {
            /* Here is where my AJAX code for logging off goes */
        }
        else {
            return false;
        }
    }
}, false);

TechQA.

How do I disable Android Back button on one page and change to exit button on every other page

There are 4 answers

Related Questions in ANDROID

Related Questions in CORDOVA

Related Questions in JQUERY-MOBILE

Related Questions in BACK-BUTTON-CONTROL

Popular Questions

Popular Tags

Trending Questions