Cordova 5.0 Back Button Exits jQuery Mobile App

Question

I'm building a Cordova 5.0.0 application with Visual Studio 2015 RC and jQuery Mobile (multipage app) (jQuery 2.1.4, jQuery Mobile 1.4.5), and I'm experiencing behavior with the back-button contrary to my understanding of how it should work. Right now, all my testing and development is being done on/for Windows Phone 8.1. The only plugins I'm using are cordova-plugin-media, which has a dependency on cordova-plugin-file, though I'm not explicitly using the file plugin.

The problem

No matter what page I'm on, if I press the hardware back button, the app just goes to background (doesn't close, just the app is navigated away from). From everything that I've read, I understand that the back button is supposed to work like page navigation by default. (That is, if you go from page1 to page2 and press back, then you go to page1).

So, I've tried overriding the back-button with my own implementation, but I can't get the backbutton event to fire.

Here is some code:

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        console.log("deviceReady");
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        console.log('assign back button');
        document.addEventListener('backbutton', function (e) {
            console.log("backbutton");
            window.history.back();
            return false;
        }, false);
    };

When I run my app, deviceReady makes it to the console, and so does assign back button. When I navigate into my app (doesn't matter if it's 1, 2, 3, or 4 pages) and click the back button, backbutton doesn't make it to the console, and the app just moves to the back.

If I change the event listener to this:

document.addEventListener('backbutton', onBackButton, false);

and

function onBackButton() {
    console.log("backButton");
    window.history.back();
    return false;
};

then I get the same result.

My script tags are at the bottom of my body tag inside index.html and are in this order:

<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/platformOverrides.js"></script> // Empty file

<script src="scripts/index.js"></script>
<script src="scripts/jqueryHelpers.js"></script>

Is there something blaringly obvious that I'm doing wrong here?

platformOverrides.js is provided by the Visual Studio template and is empty. index.js is provided by the template, and is where the code posted above lives. jqueryHelpers.js is just two constants, like this:

var APIROOT = "http://WEBAPI-ADDRESS.COM/";
var PCFGUID = "00000000-0000-0000-000E-000000000000"; // changed to Guid.Empty here for security reasons.

EDIT

I've noticed that Visual Studio is pulling down the incorrect version of Cordova also. I'm not sure how to correct this, and I'm not sure if this is my problem or not. I've opened a new question for it, but wanted to mention it here in case it was relevant. I'm specifying 5.0.0, but when I look at the dynamic content while debugging, it looks like it's using 3.9.0-dev

EDIT

Upon further research, it looks like the version number might be correct. See: https://stackoverflow.com/a/31430780/403404

Answer 1

I had exactly the same problem and I found another question here in Stackoverflow with the answer. You can check it here Phonegap +jquery mobile + windows phone: Back button issue

As a quick view here is the code that solves the problem:

WinJS.Application.addEventListener("backclick", function (evt) {
if (!jQuery(".ui-page-active").attr("id") == "page-home")) {
    history.back();
    // Prevent the default behavior by returning true. evt.preventDefault doesn't cancel the external code.
    return true;
}
// Execute the default behavior.
return false;
};

PS: I changed the code a bit to avoid the deprecated jQuery.mobile.activePage from the original answer.

Hope it helps