Handling Android back button in jQuery Mobile

Question

I'm creating a jQuery Mobile app which is contained within a Titanium app's webview. When the Android back button is pressed, it exits the app rather than going to the previous page (not the best default behavior in my opinion.) I'm trying to get around this by executing the following code on app load:

document.addEventListener("deviceready", function () {
            alert("adding back button event");
            document.addEventListener("backbutton", function (e) {
                alert("in back button event");
                if ($.mobile.activePage.is('#homepage')) {
                    alert("exit app");
                    e.preventDefault();
                    navigator.app.exitApp();
                }
                else {
                    alert("go back");
                    navigator.app.backHistory()
                }
            }, false);
        }, false);

Everywhere I see threads about this issue, they say to use the backbutton event, however it's not being fired at all. If I wrap it in a deviceready event, like above, then deviceready isn't called either. Is the webview somehow suppressing these events, or is there another way to do this with jQuery Mobile?

score 0 · Accepted Answer · answered May 21 '13 at 14:50

Your example will not work because you are trying to use Phonegap API call for backbutton handling.

You need to use something appropriate to Appcelerator. First you should check out the canGoBack, canGoForward, goBack and goForward functions for webViews.More info can be found here.

Basically you will need to create function that will handle a backbutton in your webview. Something like this:

detailContainerWindow.addEventListener('android:back', function(e){     
    if (detailView.canGoBack()) {
            detailView.goBack();
        } else {
            detailContainerWindow.close();
        }
});

Handling Android back button in jQuery Mobile

1 Answers1