jquery mobile multipage wont work

Question

Please help,

jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.

<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header"  data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>  
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer"  data-position="fixed" data-theme="d">
<div data-role="navbar"  data-iconpos="bottom">
<ul>
<li><a href="#description" data-role="button" data-icon="star">Description</a></li>
<li><a href="#physicians" data-role="button" data-icon="star">Physicians</a></li>
</ul>
</div>
</div>
</div>

<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header"  data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer"  data-position="fixed" data-theme="d">
<div data-role="navbar"  data-iconpos="bottom">
<ul>
<li><a href="#description" data-role="button" data-icon="star" data-transition="pop">Description</a></li>
<li><a href="#physicians" data-role="button" data-icon="star" data-transition="pop">Physicians</a></li>
</ul>
</div>
</div>
</div>

score 2 · Answer 1 · edited Sep 23 '12 at 08:16

2

Try adding to the anchor the attribute rel="external".

Example:

<a href="#description" data-role="button" data-icon="star" rel="external">Description</a>

edited Sep 23 '12 at 08:16

Littm

4,923
4
30
38

answered Sep 11 '12 at 17:39

geralOE

484
4
7

score 1 · Answer 2 · answered Feb 04 '12 at 17:05

1

try giving <div data-role="page" first for your second page

answered Feb 04 '12 at 17:05

uday

8,544
4
30
54

oh, it has
– Jayden Feb 04 '12 at 17:07
give that attrib before mentioning `id="physicians"` in your second page & try it – uday Feb 04 '12 at 17:09
the same effect :(. actually i swapped the positions of data-role and id tag before to try if it will solve the issue. – Jayden Feb 04 '12 at 17:11
I doubt if you can have any other attrib for `
` please remove the other attribs. Here is some helpful [link](http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html)
– uday Feb 04 '12 at 17:35
data-title and id attribs are used for multipage – Jayden Feb 04 '12 at 17:39

score 0 · Answer 3 · answered Feb 06 '12 at 20:35

0

When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!

Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.

Try linking to this page with an external link and you'll find it works fine.

answered Feb 06 '12 at 20:35

Clarence Liu

3,874
2
25
29

No, The page is not loaded from another page. what i mean the page is clicked from another page. And i don't have other js file aside from the jquery mobile. – Jayden Feb 07 '12 at 14:49
example i have a multipage : multipage.html The multipage functionality works fine when you browse the file directly. But if you have a page like: home.html and it has a link to multipage.html the multipage functionality of multipage.html doesnt work. If you refresh the page, it will work again. – Jayden Feb 07 '12 at 15:03
Try data-ajax="false" on your a href= to your page My Link – imaginethepoet Feb 10 '12 at 04:47

jquery mobile multipage wont work

3 Answers3

Linked