back-button not working after home-button in phonegap app

[markusweb]

i am using jquerymobile 1.2 with phonegap 2.2.0 on IOS.
i have an app that starts with the index.html in www-folder of the phonegap app. via ajax i will load other pages/listviews in dom.

index.html -> list1 -> list2 -> detail. on each page the back-buttons works

now i do

index.html -> list1 -> list2 -> [home-button] index.html -> list1

at this stage the back-button does not work anymore. it will try to load the "local" index-file from webserver. i see log entries in error.log at this stage someting went wrong.

i fixed it with:

var homeUrl;
function onDeviceReady() {
homeUrl = $.mobile.urlHistory.stack[0].url;
}
// fix nach klick auf home, klappt der back auf home nicht mehr zuverlässig
$( document ).on( "pagebeforechange" , function(event, data) {
if (data.toPage == homeUrl) {
data.toPage = 'file://' + data.toPage;
}
});

[jaspermdegroot]

@markusweb

Even though it is a PhoneGap app, can you please provide a test page. See the contributing guidelines for our JS Bin template.
Also, what iOS version/device did you test on?

[jerone]

Maybe it's related to this bug fix: #5235

[markusweb]

test pages are difficult. 1) i think it is (at least for a small part) phonegap related. the home-button will referr to the id "homepage". this div will be in the local index.html. when clicking on homepage i will see that the toPage is the localpage url of the initial index.html in www-folder. 2) the same app as a mobile webpage will work like expected. there is also mobile testpage, with the same coding and logic, here everything is working.

i can provide you with some more logging via console.log. which events will be important? which vars/data should i check?

[jaspermdegroot]

Thanks @jerone ! Based on @markusweb his workaround I agree that PR #5235 addresses this issue as well.

[markusweb]

It looks like 5232 is related but the fix didn't work, so i have to stick to my solution. It has something to do with switching between online and local links.

i have made one more addtion. in my first patch it only worked when i linked back to the local index.html file. i also have for example a click-path like:

index.html -> info.html -> changed.html (ajax call to load json data) [at this point back does not worked and lead to "error loading page" ], same reason like the home/back issue.

var baseDir;
function onDeviceReady() {
    homeUrl = $.mobile.urlHistory.stack[0].url;
    baseDir = homeUrl.replace('index.html','');
}
// fix for phonegap: back between ajax and local pages
$( document ).on( "pagebeforechange" , function(event, data) {
    if ( typeof data.toPage === "string" ) {
        var page = data.toPage;
        if  (page.indexOf(baseDir) != -1 && page.indexOf('file://') == -1) {
            data.toPage = 'file://' + data.toPage;
        }
    }
});

in pagebeforechange i added a console log to show the data.toPage 0) before and after 1) my addtion of "file://"

this is the log for the back-button problem. i am on the page "wir-ueber-uns.html". now i click an ajax link which loads jason data and displays a list.

0) http://app.MYSITE.de/events/....
1) http://app.MYSITE.de/events/....

now i click the pack button:

0) /Users/markus/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/MYAPP/www/wir-ueber-uns.html
1) file:///Users/markus/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/MYAPP/www/wir-ueber-uns.html

as you can see in 0) the file:// is missing. the app will try to load that page from http://app.MYSITE.de/Users... which i can see in my error-log from my webserver. i hat to add the file:// to fix this and make the back working right.

[markusweb]

same on andoid, tested on device with android 2.3 and in emulator with 4.2

[emilycestmoi]

I can confirm this in IOS as well using jqm 1.2 and phonegap 2.1. I have a single index.html page layout and I am seeing the missing "file://' behaviour as well.

The way I reproduce this is to use the back button to navigate back to the first page.

For example: index.html#welcome -> index.html#page1 -> index.html#welcome -> index.html#page2 -> back button (this breaks due to the missing file:// prefix) and my app is dead.

Back button behaviour works fine when using the app in a browser just as described above.

[emilycestmoi]

Actually I have tested this further and my problem was related to url encoding and not a missing file:// prefix.

For example, running on an actual ipod touch most of my page urls on back look like this (good):

2013-02-15 12:04:38.994 Raw Recipes[377:307] [LOG] /var/mobile/Applications/D9FEC67A-D2CF-4A93-B1E8-79BCFEF3935E/Raw Recipes.app/www/index.html#recipes

But when following the flow I have listed in my previous comment of navigating "back" to the first page, the destination url looks like this:

2013-02-15 12:04:38.987 Raw Recipes[377:307] [LOG] /var/mobile/Applications/D9FEC67A-D2CF-4A93-B1E8-79BCFEF3935E/Raw%20Recipes.app/www/index.html

Notice the space encoding. If I do this:

$(document).on("pagebeforechange" , function(event, data) {
    if (typeof data.toPage === "string") {
        console.log(data.toPage);
        data.toPage = decodeURIComponent(data.toPage);
     }
});

Everything work properly and my problem is solved. So why does that particular url get encoded?

[jaspermdegroot]

@bfcam @markusweb

Is this still a problem in 1.3? Also, what iOS version do you test on?

[emilycestmoi]

@uGoMobi

I just finished development on the app in question. I am still using jqm 1.2 so I haven't tried 1.3 yet. What I found was that the "fix" I described above to decode the destination page actually broke on iOS6. It seems that iOS6 needs an encoded url but iOS5 needs an unencoded url. What I ended up doing was renaming my .app directory to have no spaces "Raw Recipes.app" -> "RawRecipes.app" and that way I did not need to hack around the problem and it worked on both iOS5 and iOS6.

I will try jqm 1.3 on my next project and see how that goes.

[ldeluca]

@markusweb @bfcam it doesn't appear that there has been any activity on this issue in over a year and a half. Can you confirm whether or not this is a problem with the latest jQM? Also, there isn't a jsbin test page which should be easy to do regardless of the use of Cordova/PhoneGap. Can you please verify and/or provide a test case and I will look into and try to reproduce? Thanks.

[arschmitz]

Im going to close this since its old and has no test case also looking at the code mentioned and referenced issues it seems the code behind this has changed a lot too so i'm going to close this.