CODEWITHSUNDEEP
jqueryjquery-mobile
Dancer
Dancer

Reputation: 17701

Jquery Mobile - Detect Page Refresh - Return to Homepage

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

Upvotes: 5

Views: 6837

Answers (6)

Don Zanurano
Don Zanurano

Reputation: 15

i think, this is more simpe

$(document).on("pagebeforeshow", function() {
    window.location = "page";
});

Upvotes: 0

ArcadeRenegade
ArcadeRenegade

Reputation: 903

I'm a little late but I ran with Patch's idea to create a very simple solution. Throw this in a script tag or in your JS file before $(document).ready()

checkPage();

function checkPage() {
    var _hash = location.hash;

    if (_hash != '' && _hash != "#home") {
        var _url = location.href.replace(_hash, "");
        window.location.href = _url;
    }
}

Upvotes: 0

Clay
Clay

Reputation: 11

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

Upvotes: 1

Patrick
Patrick

Reputation: 7205

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

Upvotes: 3

Phill Pafford
Phill Pafford

Reputation: 85388

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

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:

Upvotes: 1

Greg
Greg

Reputation: 31378

You could grab the URL with in your $(function() {}); method (which only runs on page load), and if it contains a # then redirect to Home Page.

Edit: or use window.onload = function ... as a pure JS alternative.

Upvotes: 0

Related Questions