jQuery back button does not work properly after refresh

Question

On my jQuery mobile app;

On menu.html and inside body I do something like this to go help.html;

....

$(document).off('pageinit', '#menupage').on('pageinit', '#menupage', function() {

    $(document).off('click', '#help').on('click', '#help', function(){
            $.mobile.changePage("help.html", {
                reloadPage: true,
                transition: "flip",
                reverse: false
            });
        });
}

....

<li><a id="help" href="#" role="link" data-role="none">
                        <div class="img help"></div>
                        <div class="menuTitle langMenuItem3">Help</div>
                        <div class="arrow"></div>
</a></li>

Then on the help.html page I have a back button like this to go back to menu.html:

<header data-role="header">
    <a href="#" data-rel="back" class="button" data-role="none">
        <div class="arrow_reverse"></div><span class="langBack">Terug</span>
    </a>
    <div class="pageTitle">Over deze app</div>
</header>

My problem is this works under normal conditions, BUT if I make a refresh on menu.html, then go to help.html and then go back to menu again, menu.html does not load properly, I can see the page visually loaded ok but on firebug I see that some necessary javascripts inside tags does not hit anymore, It never hits any javascripts anywhere on menu.html anymore, just loads the previous html from cache thats all. Also the page title of menu.html does not change correctly and stays as "Help" after that point.

my full menu.html looks like this;

http://jsfiddle.net/M5CYZ/

Any ideas?

if you back and further several times without refresh, you encounter the same? — Omar, Apr 05 '13 at 13:53
@Omar yes..but if i make a refresh on help.html problem solves! — Spring, Apr 05 '13 at 14:04
This is weird..the problem is within menu.html then. Can you post its' markup? are using `data-dom-cache` or `data-prefetch`? — Omar, Apr 05 '13 at 14:15
lol, things that cause headache _sometimes_ ;) could you post markup and code of menu.html? or a fiddle. [dom-cache and prefetch](http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html). — Omar, Apr 05 '13 at 14:19
@Omar tnx I copy paste some code here from menu.html http://jsfiddle.net/M5CYZ/ — Spring, Apr 05 '13 at 14:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27645/discussion-between-omar-and-spring) — Omar, Apr 05 '13 at 14:42

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

This is a wild guess but according to your code this is a normal behaviour.

jQuery Moible event pageinit will trigger only once during the initial page load and unless page is refreshed (manually, with rel="external" or in your case reloadPage="true") it will never trigger again.

If you want javascript to execute again each time page is visited then use pagebeforeshow event instead. As seen in your example, removing pageinit and adding it back will not help you.

If you want to find more, read my other answer/article about page events: jQuery Mobile: document ready vs page events

And here's an example to prove my point: http://jsfiddle.net/Gajotres/Q3Usv/

$(document).on('pageinit', '#index', function(){       
    alert('Pageinit');
});

$(document).on('pagebeforeshow', '#index', function(){       
    alert('Pagebeforeshow');
});

edited May 23 '17 at 10:25

Community

1
1

answered Apr 05 '13 at 13:58

Gajotres

57,309
16
102
130

another thing is if i make a refresh on help.html and go back then problem solves..any ideas? – Spring Apr 05 '13 at 14:08
as i said my code works good but when i make a refresh manually on menu.html then this problem happens – Spring Apr 05 '13 at 14:09
Interesting. Can you try something else. Replace your help.html with this button code:
Terug – Gajotres Apr 05 '13 at 14:12

Omar · Accepted Answer · 2013-10-20T21:34:44.710

2

Do it this way.

Give back button an ID

<a href="#" id="backbtn" class="button"> 
 <div class="arrow_reverse"></div><span class="langBack">Terug</span> 
</a>

and then add the below code in help.html

$('#backbutton').off('click').on('click', function () { 
 $.mobile.changePage("menu.html", { 
  reloadPage: true, 
  transition: "flip", 
  reverse: true 
 }); 
});

edited Oct 20 '13 at 21:34

answered Apr 05 '13 at 14:59

Omar

32,302
9
69
112

1

Looks like you're missing a dot (`.`) for the `on()`. – Sparky Jun 07 '13 at 14:58

jQuery back button does not work properly after refresh

2 Answers2