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

Also try:

function onBackKeyDown(e) {
    e.preventDefault();

    if ($.mobile.activePage.attr('id') == 'main') {
         <!-- navigator.app.exitApp(); -->
         device.exitApp();
    }
    else {
         history.back(1);
    } 
}

Answer 3

For those who came here because the app closes after having been in focused text-field and pressing the back button:

In Android 4.0.3 (ICS) you do not have to override the back button with the PhoneGap API to stop closing/crashing the app after having focused an input text-field and then pressing the back button. Normally this closes the app, because WebKit is creating a tap-highlight with an additional outline that can not be changed with CSS.

When you focus the input the soft-keyboard comes up. When you press the first time the backButton your softkeyboard disappears. When you click again to go back in navigation-history, the app is closing instead of jumping to the page visited before. This is because the highlighting jumps out of the navigation-structure. It seems like it is not in the DOM. I don't really understand that behaviour. Here is the solution:

Just add

input {
-webkit-user-modify: read-write-plaintext-only
}

This interrupts webkit doing a tap-highlight and you still stay in the app and can go back in History with your (not overridden) backButton.

Answer 4

I came here because of the issue with the back button inside a text field (input or textarea) in a Cordova/PhoneGap app that doesn't trigger the normal behavior (in my case, it doesn't trigger my JavaScript handler).

Unfortunately, the above solution using CSS doesn't work on Android 2.3.

And the chosen solution, which overrides the event in Java, isn't enough for me because I need to trigger a JavaScript handler, not go back in the webview. Also, this solution is reimplementing the default Cordova behaviour, which is not best practice, as it loses other built-in features.

So, what I did (and it worked) was override the KeyUp event, as above, but instead of reimplementing it, I just called the handler on the appVIew (which is Cordova's implementation).

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    return appView.onKeyUp(keyCode, event);
}

Answer 5

This is the problem of using things like PhoneGap. They build applications the way that Android doesn't work.

The back button pops the latest activity of the activity stack. As you have a whole application that looks like multiple activities, it's in fact a single activity with overlays. What you will have to do, and keep in mind this, this isn't really the proper way of doing things.

You will have to override the functionality of the back button pragmatically to get it to go back in the jQuery stacks, and then once the flat Android application is the only thing that's left, go back from that too. I don't know if PhoneGap allows you to have that much control over the Android system, but by default, the Android OS won't act normally with your jQuery list.

I hope this provides some insight.