Response title
This is preview!
Mixing single page and multiple page documents
in jQuery Mobile
•
3 months ago
Hello,
I'm starting with jQuery Mobile and I have a problem. I have two HTML documents:
- page1.html
- page2.html (contains the following:)
+ - page2a
+ - page2b
- page2.html (contains the following:)
+ - 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
- 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>
- <!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>
1
