Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
markusweb opened this Issue · 12 comments

6 participants

@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
Collaborator

@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
Collaborator

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

@bfcam

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.

@bfcam

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
Collaborator

@bfcam @markusweb

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

@bfcam

@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
Owner

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.

@arschmitz arschmitz closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.