Search jQuery

jQuery Forum

jQuery Mobile

jeroenem

Multi-page templates

in jQuery Mobile • 10 years ago

I'm currently updating a news app which has the following structure:

Dashboard (Shows the latest news)
Categories (Overview of all categories)
Categories detail (Overview from a category with their articles)
News article (Content, but... with Multi-page template support)

The news article page supports Multi-page templates for displaying the actual content, slideshows & a dialog for sharing

For some reason, the multi-page templates aren't working as supposed... It doesn't work all the time.. which is driving me nuts. Sometimes it works, sometimes it doesn't. When it doesn't work, it loads the "Dashboard-page" for no reason while it has to load the share dialog or the slideshow page.

See my code below:

<section data-role="page" id="xml-article">
<header data-role="header">
<h1>Category name</h1>
</header>
<section data-role="content" style="overflow: scroll;-webkit-overflow-scrolling: touch;">
<header id="article-title">
<h2>Article title</h2>
</header>
<article id="post">
<figure>
<% if Thumb %><img class="thumbnail" src="$Thumb" width="80" height="80" /><% end_if %>
</figure>
<h3>$Intro</h3>
<p><strong>Gepubliceerd: <% if Datum %><span class="time">$Datum</span><% end_if %></strong><br />
Author: $Auteur</p>
$Content
<% if Fotos %>
<a href="#gallery-1" data-role="external">Open slideshow</a>
<% end_if %>
</article>
<ul data-role="listview" id="categorie">
<li data-role="list-divider">Meer $Title</li>
<% control Artikelen %>
<li><a href="$Link"> <% if Thumb %><img src="$Thumb" width="80" height="80" /><% else %><img src="$ThemeDir/images/article/article-img.gif" /><% end_if %> $Title</a></li>
<% end_control %>
</ul>
</section>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="/home/" data-iconpos="top" data-icon="home">Dashboard</a></li>
<li><a href="#share" data-rel="external" data-icon="grid" data-transition="slideup">Share</a></li>
</ul>
</nav>
</footer>
</section>
<section data-role="dialog" id="share">
<header data-role="header">
<h1>Share this article</h1>
</header>
<section data-role="content">
<article data-role="controlgroup">
<a data-theme="c" data-rel="external" href="http://www.facebook.com/share.php?u={$AbsoluteLink}" data-role="button" data-icon="ipers-facebook">Facebook</a>
<a data-theme="c" data-rel="external" href="http://twitter.com/share?url={$AbsoluteLink}" data-role="button" data-icon="ipers-twitter">Twitter</a>
<a data-rel="back" href="" data-role="button" data-theme="a">Cancel</a>
</article>
</section>
</section>
<section data-role="page" id="gallery-1" class="gallery-page">
<header data-role="header">
<h1>Gallery</h1>
</header>
<section data-role="content">
<% if Fotos %>
<ul class="gallery">
<% control Fotos %>
<li><a href="$Link"><img src="$Link" alt="Afbeelding-{$Pos}" /></a></li>
<% end_control %>
</ul>
<% end_if %>
</section>
</section>

I'm not sure, but is anything going wrong? The rest of the webapp is working perfectly on RC 1.0

- Jeroen

Response title

Attachments

jQuery Forum

Multi-page templates

Statistics

Tags

Actions

Related Posts