CODEWITHSUNDEEP
androidhtmljquery-mobilecordova
himanshu
himanshu

Reputation: 1980

Facing an issue in jquerymobile's multi page template stucture

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.

Upvotes: 2

Views: 2750

Answers (4)

Adam
Adam

Reputation: 1

An other way to do it is to use rel="external" as follow:

<a href="multipage.html" rel="external" >Multi-page link</a>

A full tutorial can be found at jQuery Mobile and multiple pages

Upvotes: 0

Yves Dessertine
Yves Dessertine

Reputation: 51

Thanks @ghm04 for giving the clue:

<li><a data-ajax="false" href="chapter1.html">1:-The Big Picture</a> </li>

If anybody wants to know why (at least, I do), the answer is in the doc :

It's important to note that 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.

For example, a link to a page containing multiple internal pages would look like this: Multi-page link

http://jquerymobile.com/demos/1.0/docs/pages/page-links.html ("Linking within a multi-page document")

Upvotes: 3

Clement Ho
Clement Ho

Reputation: 329

I had the same problem before and I ended up using multiple page solution. Because I need to back button to work. As soon as I start using single page (data-ajax="false"). my history will mess up and the back button will not work correctly. Even if I use 

<a href="index.html">Back</a>

(my back button), the index.html will not work properly. So I give up and put everything on index page.

Upvotes: 0

gmh04
gmh04

Reputation: 1351

If you link to a multi page from single page you'll need to set data-ajax="false":

<li><a data-ajax="false" href="chapter1.html">1:-The Big Picture</a> </li>

Upvotes: 6

Related Questions