Question

I’m trying to create a mobile version of my views using jQuery Mobile, but it doesn’t work like expected.

I have two pages – a.html has one jQuery Mobile page (div with data-role="page") and a link to b.html which has several jQuery Mobile pages. Now if I load a.html in my browser I can go to b.html and display the main “page”, but any links inside b.html referring to other “page” divs inside b.html will fail (this are the hash links with href like #otherpage). If I go straight to b.html all links work perfectly.

Is it possible to serve several “page” divs in b.html without breaking the navigation controls?

I’m using latest jQuery Mobile 1.0 alpha 4.1.

UPDATE

Framework I’m using is Ruby on Rails.

Part of my mobile layout:

<div data-role="page">
  <div data-role="content">
    <%= yield %>
  </div>
</div>
<%= yield :pages %>

Page a.html – that is an index action of a Rails scaffold:

<ul data-role="listview">
  <% @tv_series.each do |tv_series| %>
    <li><%= link_to tv_series.title, tv_series %></li>
  <% end %>
</ul>

Page b.html – this are show actions of the same Rails scaffold:

<ul data-role="listview">
  <% @seasons.each do |season| %>
    <li>
      <!-- this are the links that work only if base page was b.html -->
      <a href="#season<%= season.id %>">Season <%= season.number %></a>
    </li>

    <%= render :partial => 'seasons/season.html.erb',
      :locals => { :season => season } %>

  <% end %>
</ul>

The season partial generates a new page div:

<% content_for :pages do %>
  <div data-role="page" id="season<%= season.id %>">
    <div data-role="content">
      whatever
    </div>
  </div>
<% end %>

Now the error I get: if I go to scaffold index (/tv_series) and select one item, I go to show page with URL /tv_series#/tv_series/:id – the links I get on this page look like /tv_series/tv_series/:id#season134 which is obviously wrong, jQuery Mobile tries an AJAX request and fails with page not found. If I go to /tv_series/:id manually all the links look fine (/tv_series/:id#season134).

Answer 1

Finally I’ve found my answer in jQuery Mobile 1.0 alpha 4.1 documentation:

It’s important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel=”external” or data-ajax=”false” to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

So with current navigation system it’s just not possible.