How to use pageinit correctly?

Question

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?

score 6 · Answer 1 · answered Apr 29 '12 at 05:40

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

Its a true pain in the ass that it took me 2 days of hell to find this. Let's hope I'm in the clear... — hunterp, Dec 16 '12 at 23:42

score 2 · Answer 2 · answered Dec 16 '12 at 20:21

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.

score 2 · Accepted Answer · answered Jan 08 '12 at 23:59

2

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

answered Jan 08 '12 at 23:59

nav

3,035
1
20
24

And where should I call the javascript file? – Dennis Jan 09 '12 at 00:30
In a common js file thats loaded in as part of your HEAD? – nav Jan 09 '12 at 00:45
And that file will only called once, because jquerymobile won't execute the file in the header again because the header is only requested once, right? – Dennis Jan 09 '12 at 01:46
also good to use **$(document).delegate('#inspect-page','pageinit',function(){});** instead of **$(document).on('pageinit');** The later seem to fire up more than once – thedjaney Jan 17 '13 at 01:50

barsh · Answer 4 · 2012-10-28T22:10:06.440

0

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

edited Oct 28 '12 at 22:10

answered Oct 28 '12 at 22:02

barsh

450
6
16

score 0 · Answer 5 · answered Jan 09 '12 at 08:18

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.

How to use pageinit correctly?

5 Answers5

Linked