I'm new to jqm not sure whether this is a deep linking problem, but I think so.
I have 6 htmls,
login.html
|
|
html ( folder )
|
|-------------------order.html , some anchors linke to some data-role="page" sections in this page
|
|-------------------financing.html , a data-role="page" section in this page.
|
|-------------------statistics.html ,
some anchors linke to some data-role="page" sections in this page
|
|-------------------finance.html ,
some anchors linke to some data-role="page" sections in this page
|
|-------------------more.html ,
some anchors linke to some data-role="page" sections in this page
inside each data-role="page", there is a footer navigation with 5 anchors link to 5 business pages.
currently ,
login.html to the 1st business page, which is order.html, is a rel="external", this is ok,
but each business.html's footer link to other wish can be not use external so can get the benefit of ajax effects instead of refresh page, the refreshing on a mobile device is really bad ux.
if not use the rel="external", this below problem will occur:
in each data-role="page", there is a ul supposed to fill with data,
from the first page order.html, it can find each business.html's first data-role=page's ul, e.g. the ul in financing.html, but can't find other data-role="page"'s ul elements.
footer:
- <footer data-id="justfeet" data-role="footer" data-theme="b" data-position="fixed" data-tap-toggle="false"><div data-role="navbar"><ul id="footer-ul">
- <li data-id="f1"><a class="ui-btn-icon-top ui-state-persist ui-btn-active" data-icon="star" href="order.html">order</a></li>
- <li data-id="f2"><a class="ui-btn-icon-top" data-icon="star" href="finance.html">finance</a></li>
- <li data-id="f3"><a class="ui-btn-icon-top" data-icon="star" href="financing.html">financing</a></li>
- <li data-id="f4"><a class="ui-btn-icon-top" data-icon="star" href="statistics.html">statistics</a></li>
- <li data-id="f5"><a class="ui-btn-icon-top" data-icon="star" href="more.html">more</a></li>
- </ul></div></footer>
the ul in
financing can't be find after remove the rel="external":
- <div id="financing_content" data-role="content">
- <ul id="financing_list_ul" data-role="listview" data-theme="d" data-divider-theme="b"></ul>
- </div>
other e.g. #
by_amount_page#
amountListUl ul
elements can't work when click #
by_amount_link
( this can work if add an external rel on footer navigation links )
- <section data-role="page" id="statistics_page">
- <div id="statistics_content" data-role="content">
- <ul data-role="listview">
- <li><a id="by_amount_link" href="#by_amount_page">statistics by amount</a></li>
- </ul>
- </div>
- <footer>...</footer>
- </section>
-
- <section data-role="page" id="by_amount_page" data-add-back-btn="true" data-back-btn-text=" ">
- <ul id="amountListUl" data-role="listview"></ul>
- <footer>...</footer>
- </section>
I've tried inspect with chrome, but seems the location object and url displays in the address isn't stable.
update more clearly:
there are 2 htmls, a.html, b.html
there are 2 pages in b.html, b1page and b2page.
in a.html, there is a link to b.html with #linkToB
in jquery mobile, when click #linkToB, then b.html#b1page appears,
at this time, test in console
$("section[data-role='page']")
it can only print the pages in a.html and b1page object,
so how can I get b2page object?