CODEWITHSUNDEEP
jquery-mobile
commadelimited
commadelimited

Reputation: 5119

Trigger arbitrary method on secondary page load

I'm building a simple app which loads a list of data on the first page, then lets the user dive into details about an item on the second page. Both pages have AJAX calls which retrieve data from the server and display it. I'd like to execute the data retrieval on the second page when it's loaded (whether as a secondary page, or primary). However I've tried every single method listed in the documentation for jQuery Mobile 1.4.3 and none of them are working.

To be clear, when repo.html loads by itself, it works fine, but when it's loaded as a secondary page (after a click/tap event) none of the specified events work. In fact I've written out every relevant event into a demo page for testing.

<!-- repo.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Chapter 5 - Repos</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css" />
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.mobile-1.4.3.js"></script>
</head>

<body>

    <div id="home_page" data-role="page">
        <div data-role="header"><h1>Popular Repos</h1></div>
        <div data-role="content">
            <ul id="results" data-role="listview" data-dividertheme="b">
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        $(document).on("hashchange", function(event){console.log(event)});
        $(document).on("mobileinit", function(event){console.log(event)});
        $(document).on("navigate", function(event){console.log(event)});
        $(document).on("pagebeforechange", function(event){console.log(event)});
        $(document).on("pagebeforecreate", function(event){console.log(event)});
        $(document).on("pagebeforehide", function(event){console.log(event)});
        $(document).on("pagebeforeload", function(event){console.log(event)});
        $(document).on("pagebeforeshow", function(event){console.log(event)});
        $(document).on("pagechange", function(event){console.log(event)});
        $(document).on("pagechangefailed", function(event){console.log(event)});
        $(document).on("pagechangefailed", function(event){console.log(event)});
        $(document).on("pagehide", function(event){console.log(event)});
        $(document).on("pageinit", function(event){console.log(event)});
        $(document).on("pageload", function(event){console.log(event)});
        $(document).on("pageremove", function(event){console.log(event)});
        $(document).on("pageshow", function(event){console.log(event)});
    </script>

</body>
</html>

When this page is loaded as a secondary page, none of the above events fire. None of them. When the page is reloaded, the following events fire, in order:

jQuery.Event {type: "pagebeforechange", }
jQuery.Event {type: "pagebeforechange", }
jQuery.Event {type: "pagebeforecreate", }
jQuery.Event {type: "pageinit", }
jQuery.Event {type: "pagebeforeshow", }
jQuery.Event {type: "pageshow", }
jQuery.Event {type: "pagechange", }

Is there something I'm missing?date

Upvotes: 0

Views: 104

Answers (1)

user2665795
user2665795

Reputation: 21

Just use document ready if you want it to only happen once. Place the script in the head of every page. see http://jsbin.com/ofuhaw/1538.html

jQuery mobile will only execute scripts in the head on the initial page load. During an ajax load they will be completely ignored. It needs to be on every page incase of a refresh while currently on page2.

If you want to avoid sending the script on ajax request ( even though its ignored ) to avoid transferring the extra bytes you can check the HTTP_X_REQUESTED_WITH header and if its equal to xmlhttprequest not send the script tag because this means its an ajax request. You can see a demo of this using PHP at http://demos.jquerymobile.com/1.4.3/toolbar-fixed-persistent-optimized/

Upvotes: 1

Related Questions