Search jQuery

jQuery Forum

jQuery Mobile

wizzyboom

Listview links on multi-page not working when page loads via Ajax

in jQuery Mobile • 6 months ago

The listview that I have on a multi-page templated page (Services.html) isn't working when it is loaded.

Here's the scenario:

First page loads (index.html) on that page is a listview containing a link to Services.html. Services.html loads when tapped. On Services.html is a multi-page template. The initial page that loads on Services.html has a listview on it that links to the other pages within Services.html. This listview to other pages does not work for some reason?

Here is the code for index.html:

<div data-role="page" id="home">
<div class="headerHome" data-role="header" data-position="fixed" data-theme="c">
<img class="imgMrllHeader" src="assets/images/header-hmpg.jpg" width="100%" />
<p><a href="scheduling.html"><img src="assets/images/schedule.png" /></a></p>
</div>
<div id="contentHome" data-role="content">
<ul id="hmpgLinkList" data-role="listview" data-inset="true">
<li><a href="https://v5.lextranet.com/lcs/mobile/mcr/login.lcs" rel="external"><img src="assets/images/icon-ltr.png" alt="Mobile LTR">Mobile LTR</a></li>
<li><a href="services.html"><img src="assets/images/icon-services.png" alt="Services">Services</a></li>
<li><a href="contact.html"><img src="assets/images/icon-telephone.png" alt="Contact Us">Contact Us</a></li>
<li><a href="#social"><img src="assets/images/icon-facebook.png" alt="Social Media">Social Media</a></li>
</ul>
</div>
</div>

Here is the code for Services.html and some of its sub-pages:

<div data-role="page" id="services">
<div data-role="header" data-position="fixed">
<h2>Services</h2>
</div>
<div data-role="content">
<ul id="servicesListview" data-role="listview">
<li><a href="#translations" data-transition="slide">Translations</a></li>
<li><a href="#audio" data-transition="slide">Audio Info</a></li>
<li><a href="#page3" data-transition="slide">Link 3</a></li>
<li><a href="#page4" data-transition="slide">Link 4</a></li>
<li><a href="#page5" data-transition="slide">Link 5</a></li>
<li><a href="#page6" data-transition="slide">Link 6</a></li>
<li><a href="#page7" data-transition="slide">Link 7</a></li>
<li><a href="#page8" data-transition="slide">Link 8</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="true">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a id="lnkHome" href="index.html" data-icon="custom">Home</a></li>
<li><a id="lnkSchedule" href="scheduling.html" data-icon="custom">Schedule</a></li>
<li><a id="lnkContact" href="contact.html" data-icon="custom">Contact</a></li>
<li><a id="lnkSocial" href="index.html#social" data-icon="custom">Social</a></li>
</ul>
</div>
</div>
</div>
<div id="translations" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h2>TRANSLATION INFO PAGE</h2>
</div>
<div data-role="content">
<h3>PAGE HEADING</h3>
<p>SOME TEXT HERE</p>
</div>
<div data-role="footer"></div>
</div>
<div id="audio" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h2>AUDIO INFO PAGE</h2>
</div>
<div data-role="content">
<h3>PAGE HEADING</h3>
<p>SOME TEXT HERE</p>
</div>
<div data-role="footer"></div>
</div>

Any ideas?

Also is the footer required code for proper functionality?

<div data-role="footer"></div>

Thanks!

WizzyBoom

Replies(4)

watusiware

Re: Listview links on multi-page not working when page loads via Ajax

6 months ago

Search the forum for the many posts with tales of woe from developers trying to mix single-page documents with multi-page documents.

TL;DR Don't do it. It doesn't work and it makes your users unhappy. Use all single-page documents.

wizzyboom

Re: Listview links on multi-page not working when page loads via Ajax

6 months ago

@watusiware: Okay. And would that go with mixing Multi-pages with other multi-pages? In all actuality, index.html is also a multi-page. My thought was to use the multi-pages templates as sort of a form of grouping different areas of the app together. Services multi-page has all services related pages and Contact multi-page and all the various contact location pages in it, and so on. This is not advised?

Lastly, if I go all single page templates, does organizing the pages in their respective directories cause any issues? Or do I need to have a single root directory with a flat taxonomy?

...still learning the most efficient ways of approaching this new-to-me framework...

Thanks!

haga0054

Re: Listview links on multi-page not working when page loads via Ajax

6 months ago

Mixing multi-page with other multi-pages is not advised. The only way this would work is if you used data-rel="external" to link to the other multi-page document which removes one of the core features of JQuery Mobile.

To be honest a multi-page documents should only be used if it's a small app that will have minimal changes. I'm not sure why JQuery Mobile documentation doesn't stress this further.

As for single page templates organizing pages in directories should not cause any issues as far as I know. Keep in mind the <head> only gets loaded from the page you enter - so keep JS in external files and load it on every page in case the user bookmarks or enters from a page within.

wizzyboom