Override Android Backbutton behavior only works on the first page with PhoneGap

android, back-button, cordova, overriding

Solution

I gone through the new Phonegap source code and did following changes to make the backbutton work.

Html test code

<script type="text/javascript">
    $("#home").click(function(){
        $.mobile.changePage("home.html");
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("backbutton", handleBackButton, false);

    function onDeviceReady() {
        console.log("PhoneGap Ready!");
    }

    function handleBackButton() {
        console.log("Back Button Pressed!");
        navigator.app.exitApp();
    }
</script>

Put the following code in the `else` block of `document.addEventListener` in `cordova-1.5.0.js` after line-no 507

if (e === 'backbutton') {
    var exec = require('cordova/exec')
    exec(null, null, "App", "overrideBackbutton", [true]);
}

Put following code in `fireDocumentEvent` method of `cordova` definition in `cordova-1.5.0.js` after line-no 592

if(type == "backbutton"){
    var e = document.createEvent('Events');
    e.initEvent(type);
    if (data) {
        for (var i in data) {
            e[i] = data[i];
        }
    }
    document.dispatchEvent(e);
    return;
}

I have put the whole cordova-1.5.0.js in this gist with updated code https://gist.github.com/2020325

Though it is working for me but it still may need some changes to work in all the possible scenarios.

Edit

Put following code in `fireDocumentEvent` method of `cordova` definition in `cordova-1.5.0.js` after line-no 592

if(type == "backbutton" || type == "menubutton" || type == "searchbutton"){
        var e = document.createEvent('Events');
        e.initEvent(type);
        if (data) {
            for (var i in data) {
                e[i] = data[i];
            }
        }
        document.dispatchEvent(e);
        return;
    }

Problem

I am using PhoneGap 1.5.0, jQuery 1.7.1 and jQuery mobile 1.0.1 and trying to override the backbutton in Android as stated here or here. ``` document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap loaded function onDeviceReady() { console.log("PhoneGap Ready!"); // waiting for button document.addEventListener("backbutton", handleBackButton, false); } // handle the back button function handleBackButton() { console.log("Back Button Pressed!"); navigator.app.exitApp(); } ``` But it only works on the first page of my app. After changing to a different page the backbutton does nothing at all. The app consists of a tabview like this: ``` <body> <div data-role="page" id="pilotTab"> <div data-role="header"> <h1>Pilot</h1> </div> <div data-role="content" id="pilotContent"> content be here ;) </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="pilotTab.html" data-transition="none">Lotse</a> </li> <li><a href="bookingTab.html" data-transition="none">Verkehr</a> </li> <li><a href="mainListTab.html" data-transition="none">B&ouml;rt</a> </li> </ul> </div> <!-- /navbar --> </div> <!-- /footer --> </div> ``` Is it a stupid mistake or is there something special I have to consider to make it work properly? Thanks in advance.

Original source

Related problems