Jquery Mobile - Detect Page Refresh - Return to Homepage

Question

Is it possible to detect a page refresh within a Jquery mobile HTML5 page?

I am building a quiz as part of a client project - the quiz navigates through jquery mobile div pages within the one html page.. so for example if the user was on index.html#quizpage3 and refreshed I would like to detect the refresh and return the navigation to index.html.

Is this possible?

Cheers Paul

Answer 1

This is the solution I am working with. At time of writing, tt seems to work fine so it might help someone. However, it is only a quick fix and for better functionality its best to do it server side.

First off; notice that this code is placed before the JQM code. (From JQM website: Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded."). We get the hash of the current page, but we don't want to refresh on some pages like the home page.

<script type="text/javascript">
        var needRedirect = false;
        $(document).bind("mobileinit", function(){
            var thisPage = location.hash;
            if (thisPage != '' && thisPage != '#homepage' && thisPage != '#page1') {
                needRedirect = true;
            }
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

and then right at the start of you own code:

if (needRedirect) {
    $.mobile.changePage("#homepage");
    needRedirect = false;
}

Answer 2

Well this is a start, each time you navigate to another page you should get the refresh console log:

• http://jsfiddle.net/nkZQQ/5/

JS

$("div:jqmData(role='page')").live('pagehide',function(){
    console.log('page refreshed, redirect to home');
    $.mobile.changePage( "#home", { transition: "slideup"} );
});​

HTML

<div data-role="page" id="home">
    <div data-role="content">
        Hello Refresh
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Home</li>
            <li><a href="#page2">Page 2</a></li>
        </ul>
    </div>
</div>

<div data-role="page" id="page2" data-theme="a">
    <div data-role="content">
        Hello Page 2
        <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
            <li data-role="list-divider">Page 2</li>
            <li><a href="#home">Home</a></li>
        </ul>
    </div>
</div>​

Maybe another event would work better:

• http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Answer 3

My answer is similar to Patch's but all I did was add the following to the top of my local referenced js file before the $(document).ready line. You could also add it to an HTML script tag anywhere in the header I believe.

if (location.hash != "" && location.hash != "pageHome") {
    var url = location.href;
    url = url.replace(location.hash,"");
    location.replace(url);
}