CODEWITHSUNDEEP
jquery-mobilepage-init
Dennis
Dennis

Reputation: 2142

How to use pageinit correctly?

I have a single file for each page and i am trying to implement the pageinit event handler on every page (I think what belongs strictly to one page, should be declared there) as shown below: 

<body>
    <div id="myPage" data-role="page">
        <!-- Content here -->
        <script type="text/javascript">
            $("#myPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

The event is bound properly to the page, so the code is executed but - now my problem - if i go to another page and return later on the pageinit event will be executed twice. I think that is because the .live method binds the pageinit event again to the page. But shouldn't the pageinit event only called once at page initialization? What I am missing here?

Upvotes: 7

Views: 13569

Answers (5)

grantwparks
grantwparks

Reputation: 1153

I'm pretty sure they recommend binding pageinit to the document using on(). E.g.

$(document).on ('pageinit', '#myPage', function (event) {

instead of having the pageinit bound to the page, which is getting re-inited. In fact, I thought $(document).on() was the recommended way to bind events in jQuery, in general, now.

Upvotes: 2

barsh
barsh

Reputation: 470

$("#page1").live("pageinit", function () {
    alert('pageinit');
    $("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});

Upvotes: 0

Rod
Rod

Reputation: 76

I solve the issue by passing the name of the event, in this case the "pageinit" instead of the handler.

<script defer="defer" type="text/javascript">

var supplier = null;
$("#pageID").die("pageinit"); //<--- this is the fix
$("#pageID").live("pageinit", function(event){

console.log("initialized - @(ViewBag.ID)");
supplier = new Tradie.Supplier();

supplier.Initialize("@(ViewBag.ID)");

});

Ref: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx

Upvotes: 6

Christoph Baudson
Christoph Baudson

Reputation: 1071

A quick workaround I have used is declaring a variable containing the handler function.

var handler = function() {
    // your code
};

Then always use die() before binding the handler with live()

$( "#myPage" ).die( handler ).live( handler );

I'm sure this is not the intended usage by the authors, but it does the trick, you can leave your code within the page DIV.

Upvotes: 0

nav
nav

Reputation: 3115

I think its probably best to move your JavaScript code into another file as while your navigating around your site jQuery Mobile may cleanup (read: delete from DOM) that myPage page and therefore will have to load it in again and hense rerun that same block of code you defined and bind 2 listeners for the pageinit event.

Thats basically why they suggest using the live or on functions however it falls over if you include the binding code on the page ;)

However if you insist on having your code placed on a per page basis than use bind instead of live.

Ref: http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html

jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event).

Upvotes: 2

Related Questions