CODEWITHSUNDEEP
androidcordovaeventsdom-eventsphonegap
Nanashi
Nanashi

Reputation: 155

Phonegap-2.10 : Hardware back button not working properly

I am developing an app using phonegap-1.3.0 and android-4.0.3.Below is my code :

function home() {   
document.removeEventListener("backbutton", handleBackButton, false);
document.addEventListener("backbutton", handleBackButtonOnHome, false);
}

function edit() {
document.removeEventListener("backbutton", handleBackButtonOnHome, false);   document.addEventListener("backbutton", handleBackButton, false);
}

function handleBackButton() {
console.log("Back Button Pressed!");
home();
}

function handleBackButtonOnHome() {
console.log("Back Button Pressed in home!");
navigator.app.exitApp();
}

On click of hardware back button on edit page takes the user to the home page and when on home page the app exits as specified by the event handlers. The app is working fine on the specified setup (configuration).

Recently I upgraded to cordova-2.1.0, on click of back button on edit page exits the app instead of taking the user to the home page.

Please note : I have tried my thing but nothing seems to work,
navigator.app.backHistory()
history.back()

Any help welcome..

Upvotes: 1

Views: 2004

Answers (2)

user1868919
user1868919

Reputation: 21

When looking for a solution to this problem in my environment (Sencha Touch 2 inside PhoneGap, see Andreas Sommer's instructions here) I fixed by adding the following code to my index.html HEAD secion:

<!-- handle android hardware back button -->
<script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", function() {
        document.addEventListener("backbutton", function() {
            if (Ext.getCmp('mainview').pop(1) == null) {
                Ext.Msg.confirm("Exit", "Do you want to Exit?", function(e) {
                    if (e == 'yes') {
                        navigator.app.exitApp();
                    }
                });
            }
            else {
                return false;
            }
        }, false);
    }, false);
</script>

FYI, the "mainview" component is an Ext.navigation.View where I'm popping off the current view from the stack. If pop() returns null then we are at the home view.

This worked fine for Gingerbread and ICS but did not work with Jelly Bean. To get it to work with Jelly Bean I needed to remove the android:targetSdkVersion="17" attribute from the tag in the AndroidManifest.xml file under PhoneGap.

All of this only worked with PhoneGap. When I generate the .apk under Sencha Touch instead of PhoneGap then the hardware back button didn't get captured.

Upvotes: 2

Nanashi
Nanashi

Reputation: 155

Thanks for having a look into the problem. I resolved the issue by adding the below line

document.addEventListener("backButton", backPressed, false);

in onDeviceReady() function. And used a flag variable to navigate between pages like this,

function backPressed() {
alert('backPressed');   
if(gAppControl.pageFlag == true)
home();
else
navigator.app.exitApp();        
}

Regards, Nanashi

Upvotes: 0

Related Questions