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..

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..

• javascript
• jquery
• jquery-mobile

Share Improve this question Follow edited Jul 23, 2012 at 6:14 priyankirk asked Jul 23, 2012 at 4:04 priyankirkpriyankirk 4511 gold badge44 silver badges99 bronze badges 3

• You can add onclick event, or even better (?), you can attach the .click event. – nhahtdh Commented Jul 23, 2012 at 4:07
• i am doing it in my real app. but how to change the page???? – priyankirk Commented Jul 23, 2012 at 4:09
• Use $.mobile.changePage - see my answer. – nhahtdh Commented Jul 23, 2012 at 4:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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>

jQuery Mobile, Anatomy of a Page

Scroll down to Local, internal linked "pages"