I am new to phonegap.I am using jquery mobile with html5 for developing android app.I have three pages in my app.First is index.html,it has the list of contents.Second page have the text content and a header with two buttons e.g. back and next.And third page is the same as the second page.Now my problem is that when i click on the first list element of the index.html it redirects the user to the second page.But when i click on the next button of the second page,it should open up the third page but nothing happens.
Here is the for index.html:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Beginning Android3</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" data-divider-theme="e">
<li data-role="list-divider">Part 1:-Core Concept</li>
<li><a href="chapter1.html">1:-The Big Picture</a> </li>
<li><a href="#">2:-How to Get Started</a></li>
<li><a href="#">3:-Your First Android Project</a></li>
<li><a href="#">4:-Examining Your First Project</a></li>
<li data-role="list-divider">Part 2:-Activities</li>
<li><a href="#">5:-Rewriting Your First Project</a></li>
<li><a href="#">6:-Using XML-Based Layouts</a></li>
<li><a href="#">7:-Employing Basic Widgets</a></li>
<li data-role="list-divider">Part 3:-Data Stores, Network Services, and APIs</li>
<li><a href="#">8:-Using Preferences</a></li>
<li><a href="#">9:-Managing and Accessing Local Databases</a></li>
<li><a href="#">10:-Communicating via the Internet</a></li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
and here’s the second page:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="page1">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#page2" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
<p>Android is everywhere. Phones. Tablets.
TVs and set-top boxes powered by Google TV.Soon,
Android will be in cars and all sort of other places as well.
However, the general theme of Android devices will be smaller
screens and/or no hardware keyboard.
</p>
</div>
</div>
<div data-role="page" data-theme="b" id="page2">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
This is a sample about page.
</div>
</div>
</body>
</html>
i m using the multi page technique in second page.In second page I have two page with ids page1 and page2.I am not able to redirect the page2 from the page1‘s next button on header.Help me get rid of these problem.Thanx in advance.
If you link to a multi page from single page you’ll need to set data-ajax=”false”: