Geek Answers Handbook

JQuery Mobile - Detect Page Refresh - Return to Home Page

Is it possible to detect page refresh on a jQuery mobile HTML page?

I am creating a quiz as part of a client project - the survey moves through the jquery mobile div pages on one html page .. so, for example, if the user was on index.html # quizpage3 and updated, I would like to find update and return the navigation to index.html.

Is it possible?

Cheers Paul

+5
source share
6 answers

This is the solution I'm working with. At the time of writing, it seems to be working fine, so that might help someone. However, this is just a quick fix, and for best functionality, it is best to do this on the server side.

; , JQM. ( - JQM. mobileinit , jQuery Mobile. "). , , .

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

:

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

, , , , :

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>​

, :

+1

Patch, , , js $(document).ready. HTML script , , .

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

You can get the URL using a method $(function() {});(which only runs when the page loads), and if it contains # , and then redirected to the main page.

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

0
source

I'm a little late, but I started with the idea of ​​Patch to create a very simple solution. Throw it in the script tag or in your JS file up to $ (document) .ready ()

checkPage();

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

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

I think this is more simpe

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

More articles:


All Articles