CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
priyankirk
priyankirk

Reputation: 45

How to link Internal Pages in Jquery mobile?

What to do if i want to link two internal pages on the click of a button using jquery or javascript... i can do it using <a href=#nextPage"> in HTML but i want a script to do it! what i am doing right now is:

<!-- first page-->
<div data-role="page" id="firstPage">
<div data-role="header"> 
<h1>Test page</h1>
</div>
<div data-role="content">
<p>this page will link internal pages using # </p>
<a href="#nextPage" data-role="button">change to next page</a>
</div>
</div>

<!-- second page-->
<div data-role="page" id="nextPage">
<div data-role="header"> 
<h1>Test page 2 </h1>
</div>
<div data-role="content">
<p>this page will  appear after you click the button on first page. </p>
</div>
</div>

this is doing good, but what i need is a script to link them. as in my app i need to change the page on click of button only after certain conditions met. but i dont know how to do it...

-----------Edit------------ I found out a way window.location.href="#nextPage" this is how its done. Thanks all for your effort..

Upvotes: 0

Views: 10202

Answers (2)

nhahtdh
nhahtdh

Reputation: 56829

You can add onclick handler to the a tag:

JS

function navigate() {
    if (condition) {
        $.mobile.changePage("#nextPage");
    }
}

HTML

<a href="#" onclick="navigate()" data-role="button">change to next page</a>

OR you can do this:

JS

$(document).ready(function() {
    $(".nav-nextPage").click(function() {
        if (condition) {
            $.mobile.changePage("#nextPage");
        }
    });
});

HTML

<a href="#" class="nav-nextPage" data-role="button">change to next page</a>

Upvotes: 2

pat34515
pat34515

Reputation: 1979

jQuery Mobile, Anatomy of a Page

Scroll down to Local, internal linked "pages"

Upvotes: 1

Related Questions