2

I'm starting with jQuery Mobile and I have a problem. I have two HTML documents:

  • page1.html
  • page2.html
    • page2a
    • page2b

The problem is the following:

  • when I browse from page1.html to page2.html, it displays page2a, but I can't browse to page2b
  • when I browse from page1.html to page2a, it stays on page1.html
  • when I browse from page2.html to page2a or page2b, it works well

What is wrong with my solution? Is there any good solution to have that working properly?

Here is a code for reference:

Page1.html

<!DOCTYPE html> 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Page 1</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head> 

<body> 

<div data-role="page">
  <div data-role="header">
    <h1>Single page</h1>
  </div>
  <div data-role="content">  
    <p>See <a href="page2.html">page 2</a>.</p>
    <!-- <p>See <a href="page2.html#a">page 2a</a>.</p> -->
  </div>
</div>

</body>
</html>

Page2.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Page 2</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head> 

<body> 

<!-- Start of first page: #a -->
<div data-role="page" id="a">
  <div data-role="header">
    <h1>Page 2a</h1>
  </div>
  <div data-role="content" >  
    <p><a href="#b" data-role="button" data-transition="slide">Show page "2b"</a></p>
  </div>
</div>

<!-- Start of second page: #b -->
<div data-role="page" id="b">
  <div data-role="header">
    <h1>Page 2b</h1>
  </div>
  <div data-role="content">  
    <p><a href="#a" data-direction="reverse" data-transition="slide" data-role="button">Back to page "2a"</a></p>  
  </div>
</div><!-- /page b -->

</body>
</html>
Ploppe
  • 451
  • 1
  • 4
  • 12
  • I forgot to say that it works when adding `rel="external"`, but it prevents the AJAX preload (which I would really like to have) – Ploppe Feb 14 '13 at 10:39

1 Answers1

3

Check the below question. It seems it only works with data-rel="external".

JQM Multipage

UPDATE:

Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.

Source: JQM - Linking pages

Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112
  • I already had added this detail to the initial post: "I forgot to say that it works when adding rel="external", but it prevents the AJAX preload (which I would really like to have)". It works, but it's not the best solution – Ploppe Feb 14 '13 at 12:32
  • Yeah, thanks, that's exactly the point. The rel="external" makes iOS to leave the Webapp to open Safari. I will try the plugin – Ploppe Feb 14 '13 at 14:22