One button should redirect either to page AAA or to page BBB. This decision should depend on the choice of the buttons on the page before.
Page 1: #home
If this is a single page app, you could just switch the HREF of the setpage button when clicking the A and B buttons on the home page.
Here is a DEMO
$(document).on("pageinit", "#Home", function(){
$('.btnAB').on("click", function(e){
var id = $(this).prop("id");
if (id === 'btnB'){
$('#btnSetpage').prop('href', '#BBB');
} else {
$('#btnSetpage').prop('href', '#AAA');
}
});
});
The script above handles the click event of the 2 buttons (they have the same class). It sees which button was clicked and then sets the href of the one button on the setpage.
<div data-role="page" id="Home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<a class="btnAB" id="btnA" href="#setpage" data-role="button">A</a>
<a class="btnAB" id="btnB" href="#setpage" data-role="button">B</a>
</div>
</div>
<div data-role="page" id="setpage">
<div data-role="header">
<h1>setpage</h1>
</div>
<div data-role="content">
<a id="btnSetpage" href="#AAA" data-role="button">Submit</a>
</div>
</div>
<div data-role="page" id="AAA">
<div data-role="header">
<h1>AAA</h1>
</div>
<div data-role="content">
I am AAA
<a href="#Home" data-role="button">Home</a>
</div>
</div>
<div data-role="page" id="BBB">
<div data-role="header">
<h1>BBB</h1>
</div>
<div data-role="content">
I am BBB
<a href="#Home" data-role="button">Home</a>
</div>
</div>
In addition to @ezanker's answer, you can retrieve all details related to the clicked button as well as previous and next pages on pagebeforechange
event.
$(document).on("pagebeforechange", function (event, data)
Those details can be obtained from data object. For example, clicked / linked button details are retrieved from data.options.link
object. previous page data.options.fromPage
, and next page data.toPage
.
This event fires twice on transition, for the current page and the page it's moving to.
$(document).on("pagebeforechange", function (e, data) {
/* when webpage is first initialized, .link and .toPage are undefined */
if (data.options.link && data.toPage) {
if (data.toPage[0].id == "setpage") {
var button = data.options.link[0].text;
/* for demo */
$("#setpage [data-role=content]").html("Clicked button: " + button);
}
}
});
Demo