Phonegap + jQueryMobile: Android back button closes the application in a nested list

Question

I am building an application using PhoneGap and jQuery Mobile.

Using jQuery Mobile I created a list of nested ones.

After clicking on the nested list, I want to return. I expect that by clicking the back button on my Android (N1), it will return one level.

But instead, the android closes the application, and does not return one level.

Using PhoneGap 1.2.0, jQuery Mobile v1.0rc2, jQuery 1.6.4, Android 2.3.3.

Edit: upgrade to jQuery Mobile 1.0 and there will be no changes

Answer 1

I have the same problem, I found how to handle the back button in java code.

This will return one step, if possible, or exit the application.

@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); } 

This can also be done on the javascript side:

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

Answer 2

You can listen to the events of the back button:

 document.addEventListener("backbutton", onBackKeyDown, false); function onBackKeyDown() { // Handle the back button } 

and if the current page is on the home page ($ .mobile.activePage in jQuery mobile), exit the application with:

navigator.app.exitApp ();

Answer 3

Also try:

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

Answer 4

For those who came here because the application closes after it was focused on the text and pressed the backButton button: in Android 4.0.3 (ICS) you do not need to redefine the backButton with the phongap API to stop the application from closing / crashing after focusing input text box, and then clicking the back button. This usually closes the application because webkit creates a highlight with an additional outline that can be modified using css.

When you focus the input, an on-screen keyboard appears. When you press the first time into the background, your soft keyboard disappears. When you click again to return to the navigation history, the application closes instead of going to the previously visited page. This is because the backlight jumps out of the navigation structure. It does not seem to be in the DOM. I do not quite understand this behavior. Here is the solution:

Just add

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

This interrupts the red whitening web kit, and you still remain in the application and can return to History using your (not overloaded) backButton.

Enjoy.

Answer 5

This is the problem of using things like PhoneGap, they create applications in a way that Android does not work.

The back button displays the last activity of the action stack. since you have an entire application that looks like several activities, this is actually one action with overlays. What you will need to do, and keep in mind that this is not the right way to do something.

You will have to redefine the functionality of the "Back" button pragmatically in order to return it to jQuery stacks, and then when the flat Android application remains the only thing left, return and come back from it. I don't know if PhoneGap supports this kind of control over the Android system, but by default, the Android OS usually doesn't work with your jQuery list.

Hope this gives some insight.

Answer 6

I came here because of a problem with the back button inside the text field ( input or textarea ) in the Cordova / PhoneGap application, which does not cause normal behavior (in my case it does not work my javascript handler).

Unfortunately, the above CSS solution does not work on Android 2.3.

And the chosen solution, which overrides the event in Java, is not enough for me, because I need to run the JS handler, and not return to the web view. In addition, this solution overrides Cordoba's default behavior, which is not best practice as it loses other built-in functions.

So, what I did (and it worked) redefined the KeyUp event as above, but instead of redefining it, I just called the handler in appVIew (which is the Cordoba implementation).

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