CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Maddy
Maddy

Reputation: 590

jQuery mobile: remember variable of page before

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

Page 2: #setpage

Page 3: #AAA

or

Page 4: #BBB

I think, I can do that with the localStorage of my phone/browser (I'm using jQM+PhoneGap), but is that the best solution or is there a better way?

Upvotes: 1

Views: 213

Answers (2)

Omar
Omar

Reputation: 31732

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

Upvotes: 2

ezanker
ezanker

Reputation: 24738

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>

Upvotes: 1

Related Questions