CODEWITHSUNDEEP
jquery-mobile
leiyonglin
leiyonglin

Reputation: 6814

jquery mobile history back

The page i use js to show and hide some elements.but there is problem when i use browser back.

<div data-role="page">
    <div class="step1">
       step1 content...
       <a href="javascript:void(0)" class="nextBtn">next</a>
    </div>
    <div class="step2" style="display:none">
       step2 content...
       <a href="javascript:void(0)" class="okBtn">next</a>
    </div>
    <div class="step3" style="display:none">
       step3 content...
       <a href="javascript:void(0)" class="goBtn">next</a>
    </div>
    <script>
    some script...
    $('.nextBtn').click(function(){
        ok = do something...
        if(ok){
          $('.step1').hide();
          $('.step2').show();
        }
    });
    $('.okBtn').click(function(){
        ok = do something...
        if(ok){
          $('.step2').hide();
          $('.step3').show();
        }
    });
    </script>
</div>

but when i use browser back button.there a problem. I mean when 'step2' is showing,i click back button,i want to go 'step1' is show.

Upvotes: 0

Views: 463

Answers (2)

grigno
grigno

Reputation: 3198

I suggest you to use https://github.com/browserstate/History.js to manipulate the history of your browser

Upvotes: 0

Omar
Omar

Reputation: 31732

If you want .step1 to be visible when you load the page, here's the code.

$(document).on('pagebeforeshow', '[data-role="page"]', function () {
 $('div.step1').show();
});

Upvotes: 1

Related Questions