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;
}