CODEWITHSUNDEEP
jquery-mobile
Ploppe
Ploppe

Reputation: 481

Mixing single page and multiple page documents in jQuery Mobile

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

The problem is the following:

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>

Upvotes: 2

Views: 1230

Answers (1)

Omar
Omar

Reputation: 31732

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

Upvotes: 3

Related Questions