problems with phonegap?
lorenzosfarra opened this issue · comments
Hi,
I have a main "page" with 4 "subpage"s.
If I open this page with a normal browser, I can navigate through the various subpages without problems.
Instead, when I open this page as part of a phonegap-based app in Android, I can navigate to a subpage only once, then I can't go anywhere else.
For example, I can navigate from page to subpage1 (or from page to subpage2,3,4), but then when I click a link to another subpage nothing happens (I can't see any logs).
Is there any known problem or is it an unexpected behavior?
Thanks,
Lorenzo
Probably I can add a interesting info.
If I bind the links "click" event, on the pageinit event callback, in this way:
$(".allsteps a").click(function() {
console.log("clicked: " + $(this).attr('href'));
)};
this is what I see in the web console on firefox: """[22:07:11.310] clicked: #step2"""
and this is what I see on android logcat: """clicked: #"""
UPDATE:
it seems like is a problem related to the subpageUrl:
var subpageUrl = (parentUrl || "") + "&" + $.mobile.subPageUrlKey + "=" + subpageUId;
In my phonegap app is not correct.
If I manually set subpageUrl to ""index&" + $.mobile.subPageUrlKey + "=" + subpageUId;" where "index" is the id of the data-role="page", everything seems to work fine.
I'm going to investigate deeper tomorrow.
Lorenzo
@lorenzosfarra Did you resolve your issue?
@ToddThomson not yet, but I've not investigated too much.
In the next days I'm going to try to resolve this again, so I'll update this issue as soon as possible.
Lorenzo
@ToddThomson is there a specific reason to use the url (line 64):
parentUrl = parentPage.jqmData("url");
instead of the id?
var parentUrl = parentPage.attr('id');
Using the ID, it seems like everything works even with phonegap.
If it's important to hold the information about the Url, setting parentUrl like this fixes the problem, too:
var parentUrl = parentPage.jqmData("url") + "#" + parentPage.attr('id');
Lorenzo
@lorenzosfarra What platform are you targeting with PhoneGap? (iOS, Android, ? )
UPDATE: OK. I see you are targeting Android.
@lorenzosfarra Question: You are loading your parent page ( the one with the subpages ) using a call to loadPage() ( or by a link ).
The subpage widget does not need to be used on the initial (home) page of your app.
@lorenzosfarra When a parent page is loaded via loadPage() ( programmatically or via a link ) The parentPage.jqmData("url") is set to the url used to load the page. Every page dynamically loaded in this way will have a unique url.
The subpage widget uses this value to create a unique identifier for each subpage that is defined within the parent page. This UId is assigned to the data-url property of the subpage.
If you need to use the parentPage 'id', then the parent page has not been dynamically loaded and thus the subpage widget does not need ( and should not ) to be used.
@ToddThomson: Yes, it's Android.
"You are loading your parent page ( the one with the subpages ) using a call to loadPage() ( or by a link )." -> by a link.
At the moment I can't check the log, but please note that the page url is not null or empty, is something like /android_asset/www/somepage.html (, so not a real path). I'll add some HTML code tomorrow to verify deeper.
Thanks,
Lorenzo
@lorenzosfarra Interesting. I had not considered this. Your initial document has a link that is loading a parent page with subpages, but the request is going to a file ( your 2nd html file ) already stored on the android platform.
I look forward to what you find out tomorrow.
Thanks for your effort with this issue!
@lorenzosfarra You may need to set $.mobile.pushStateEnabled to false.
@ToddThomson unfortunately setting $.mobile.pushStateEnabled to false doesn't make it work, same behavior.
I've added a console.log("subpageUrl is " + subpageUrl) on line 73.
The steps to reproduce the problem are the following:
- Start my android app, that uses an index.html page as the first page;
- in index.html, I've an <a href="addevent.html">, where addevent.html is the multipage file;
2.1) The addevent.html page is structured in this way:
<div data-role="page" id="index">[...]
<div data-role="subpage" id="step2">[..]
<div data-role="subpage" id="step3">[..]
<div data-role="subpage" id="step4">[..]
<div data-role="subpage" id="step5">[..] - In the log, I see "subpageUrl is /android_asset/www/addevent.html&ui-page=<subpage_id>", where subpage_id is the id of the subpage, repeated for all subpages (step2,3,4,5);
- The first thing that I see on my app is the #index page;
- I click on step2 (but I see the same behavior with the step3,4 or 5), and I reach the step2 subpage without problems;
- At this point, if I click on any other link to some subpage, nothing happens.
I want to repeat here a strange information that I've previously added:
If I add this:
$(".allsteps a").click(function() {
console.log("clicked: " + $(this).attr('href'));
});
where "allsteps" is a list of link to subpages ( etc..).
If I click on one of these links, #step2 for example, I see this:
"clicked: #"
Instead, in a browser like firefox with firebug, I see this:
"clicked: #step2"
Any suggestions or other infos needed?
Lorenzo
@ToddThomson: do you have any ideas about that?
@lorenzosfarra I'm closing this issue due to the length of time open. If you still have issues with the subpage widget please open another issue.