Back button with phonegap (and query mobile?)

3
votes

I am having a problem with an application I am writing in jquery mobile and phonegap. While testing in the browser, I had no problems using the back button (no phonegap js involved). However once I try on a device with the phonegap js it breaks.

Steps to reproduce:

  1. Load app
  2. Visit several pages (linked internally using #)
  3. Click the back button or call history.back() from anywhere (using the js console, or by triggering something that calls it)

On the browser (chromium, firefox etc), it goes back one 'page' (to the previous # link whatever it was). This is the preferred behaviour.

On the device (iPhone 4, iPhone simulator, Android 2.2 (device), Android 3.2 (device)), it goes to the first/landing page (the first 'page' in the index.html file).

I suspect that the problem is with phonegap. Is there a way to revert to the preferred behaviour or the browser?

3
javascriptjqueryjquery-mobilecordova

3 Answers

0
votes

Do you use jQuery Mobile's "Back" button link attribute? I've used it lightly and it works (used on Android only so far). Are you trying to override the (Android only) backbutton event? Not recommended, for what you want, and not possible on iPhone etc anyway.

0
votes

The problem was caused by a space in the data url I was using. It seems that the desktop browsers can handle a space properly, however the mobile browsers convert the space into a %20% character. jQuery mobile attempts to use a space, but the browser only remembers the altered character.

EDIT: The jqm page has a data-url attribute that allows you to store multiple pages inside one html document.

<html>
<head> ... </head>
<body>
<div data-role="page" data-url="page-one"> ... </div>
<div data-role="page" data-url="page two"> ... </div>
</body>
</html>

The first pages can be loaded in a few ways...

In a document

<a href="#page-one">

or through javascript

$.mobile.changePage("#page-one");

The problem I had was with the page with the data-url page two. On the desktop browsers the space was maintained, and the customized history control built into jqm continued to function as expected. but on the mobile browsers, the space turned into an escaped space, which the jqm history control did not recognize or track.

-2
votes
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.0.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is loaded and it is now safe to call Cordova methods
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

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

make sure that in androidmenifest.xml file must contain android:targetSdkVersion greater than android:minSdkVersion