PhoneGap + jQueryMobile: Android back button closes app in nested list

Question

I'm creating an app using PhoneGap and jQuery Mobile.

Using jQuery Mobile I have created a nested list.

After clicking into the nested list I want to go back. I expect that clicking the back button on my Android device (Nokia N1) that it will go back one level.

But instead android closes the app instead of going back up one level.

I am using PhoneGap 1.2.0, jQuery Mobile v1.0rc2, jQuery 1.6.4, and Android 2.3.3 (Gingerbread).

I also upgraded to jQuery Mobile 1.0, and there is no change.

Answer 1

You can listen for back button events:

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

And if the current page is the homepage ($.mobile.activePage in jQuery Mobile) exit from application with:

navigator.app.exitApp();

Answer 2

I've got this same problem. I found out how to handle the back button in the Java code.

This goes back one step if possible or else exits the app.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (keyCode == KeyEvent.KEYCODE_BACK) {
    if(appView.canGoBack()){
       appView.goBack();
        return true;
    }
  }
  return super.onKeyDown(keyCode, event);
}

It is also possible to do it on the JavaScript side:

document.addEventListener("backbutton", function() {
    //Logic//
}, false);