Base tag and changePage() in 1.1.0RC1 #3745

Closed
hgross opened this Issue Mar 6, 2012 · 3 comments

Projects

None yet

3 participants

@hgross

Assume we have two .html files test.html and subfolder/test2.html.
We navigate from test.html to test2.html via a click on a <a data-role="button" href="subfolder/test2.html">..</a>.
Now we want to navigate back to the first page.
Let's try some options to navigate back to the first page of test.html which has the unique id #home.

  1. We click on a <a data-role="button" href="../test.html">..</a>
    • this works as expected
  2. We click on a <a data-role="button" onclick="$.mobile.changePage('#home')">changepage to #home</a>
    • nothing happens
  3. We click on a <a data-role="button" onclick="$.mobile.changePage(jQuery('#home'))">changepage to jQuery(#home)</a>
    • the page is changed to #home but the <base> tag's url is still set to subfolder/test2.html and all dynamically added images/scripts/css/... relative to test.html will fail to load

Live:
http://goo.gl/Waq9G

Is this a bug or is there any other way to handle the navigation flows described by 2. and 3.?

@johnbender

@hgross

<a data-role="button" href="#home">changepage to #home</a>

That might work for you but the first example is the recommended way to construct the link. Pushstate support means on a refresh the new page will be loaded as http://foo.com/subfolder/test2.html and and the id reference would fail miserably.

Is there some reason you need to use the second two?

@hgross

I accidently thought that calling $.mobile.changePage('#home') (Case 2) and $.mobile.changePage(jQuery('#home')) (Case 3) is the programmatic way for a click event on <a data-role="button" href="#home">changepage to #home</a>.

I extracted the example above from a more complex navigation flow.

I have this scenario:
1. I am building a phonegap app that dynamically creates pages based on a navigation tree (like a sitemap) using data fetched from multiple ajax calls. This pages are present in the dom and their unique ids match a specified pattern (#dynsite_<uniqueId>).
2. On every site (dynamic and external) a global header is injected with a button to move back to the #home page.
3. The mobile start page #home and other static pages like #settings and #favorites are placed in a multi-site-template.
4. From #home the user can navigate to one of the dynamically injected pages.
5. A dynamically injected page can have links to external sites (respectively single page templates)

Assume we load an external page to the dom (Point 5). Now the loaded page and the #home page is present and the base tag is set to that external url.
It would now be nice if this two cases (or at least case 3) would do something like this (but internally; without the dom overhead here):
``` jQuery('')
.appendTo(jQuery.mobile.activePage)
.trigger('click')
.remove();

to trigger a pagechange including all the base tag magic.

Regarding the pushState support:
I can handle page changes to missing page-ids during the `pagebeforechange` event in that case.

@johnbender johnbender was assigned Sep 18, 2012
@arschmitz
jQuery Foundation member

closing this base tag branch has been merged

@arschmitz arschmitz closed this Aug 7, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment