41

What's the right way to initialize objects on a jquery mobile page? The events docs say to use "pageInit()" with no examples of that function, but give examples of binding to the "pageinit" method (note case difference). However, I don't see the event firing at all in this simple test page:

<html>
 <body>  
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

  <div data-role="page" id="myPage">
    test
  </div>

  <script>
    $("#myPage").live('pageinit',function() {
        alert("This never happens");
    });
  </script>
 </body>
</html>

What am I missing? I should add that if you change pageinit to another event like pagecreate this code works.

---- UPDATE ----

This bug is marked as "closed" in the JQM issue tracker. Apparently opinions differ about whether this is working properly or not.

4
  • 1
    I am using RC1, and I have exactly opposite problem, I added pageinit to do event binding for ajax calls. call to pageinit event-method get increased each time the page loaded, e.g. if I visit that page three times, on third visit, same method get called three times. any idea.
    – Anand
    Oct 11, 2011 at 7:36
  • @SutikshanDubey Did you ever figure out why that was happening? I have the same issue...
    – J2N
    Jun 22, 2012 at 14:11
  • @JLaw here are my questions on SO stackoverflow.com/questions/7741888/… stackoverflow.com/questions/7724959/… and I am doing killing events on hide. But still not satisfied with solution i m using.
    – Anand
    Jun 26, 2012 at 12:53
  • @SutikshanDubey One thing I recently found is that I was inadvertently creating multiple event handlers every time my page was loaded. I had some code within a 'pageshow' handler that would fire on the 'click' event. Every time the 'pageshow' fired a new handler was created for 'click'. Because of this, my handlers went off multiple times. Perhaps you are encountering a similar issue? Do you have multiple handlers performing the same task unknowingly?
    – J2N
    Sep 5, 2012 at 19:50

11 Answers 11

66

It started working when I embedded script within page div:

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

Used jQuery Mobile 1.0RC1

5
  • 1
    Can confirm this solution works with the 1.0 release as well. Not sure what the issue is. Nov 21, 2011 at 9:39
  • 1
    This seems to be just a good habit to get into when using jQuery Mobile - put everything that corresponds to a page inside your <div data-role="page">, then it works whether or not the fragment is loaded with AJAX or not. Although there've been updates addressing this kind of per-page functionality in the later releases, and although it might not seem "clean" as far as XHTML goes, it's just more inline with the way JQM works.
    – Chris Nash
    Jan 2, 2012 at 1:09
  • 3
    After a long search, I finally found this in Jquery Mobile's document: Another approach for page-specific scripting would be to include scripts at the end of the body element when no data-role=page element is defined, or inside the first data-role=page element. So this is by designed. May 11, 2012 at 10:42
  • That pageinit was what saved me at stackoverflow.com/questions/8153236/jquery-mobile-changepage/… Sep 22, 2012 at 18:47
  • Thank you SO much. The simple fact that the script needs to be within the page you're binding to is blatantly missing from the jquery mobile docs (at least not in the obvious places, like where examples of this function are!)
    – Travitron
    Apr 21, 2013 at 7:48
21

.live() is deprecated, suggestion is to use .on() in jQuery 1.7+ :

<script type="text/javascript">
    $(document).on('pageinit', '#indexPage',  function(){
        // code 
    });
</script>

Check the online doc for more information about .on(): http://api.jquery.com/on/

0
9

Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.

5
  • 1
    1.0 RC1 was just released, and it fixes this issue.
    – Ofri Raviv
    Sep 30, 2011 at 13:58
  • It doesn't not work with the 'latest' versions from the git HEAD. Did you use those? I just added another comment to the github issue. It still does not work for me. This is my live test (using your code, but with the latest css/js from the git HEAD): bit.ly/qlUL7R Oct 1, 2011 at 13:02
  • Related bug in RC1 where pageinit does not fire on ajax-loaded pages: github.com/jquery/jquery-mobile/issues/2636
    – Leopd
    Oct 7, 2011 at 5:31
  • 2
    I just verified it's still a bug in 1.1.
    – fengd
    May 11, 2012 at 8:31
  • This bug still exists in 1.3.2, the script only excutes if you place it inside a div
    – Sudheer
    Aug 4, 2013 at 18:59
2
jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!

2

pageinit will not fire in case it is on secondary pages ( NOT MAIN page ) if it is written in common <script> tag...

I have such a problem - on secondary pages that are not loaded with 'rel="external"', the code in the common <script> tag is never executed...

really this code is always executed...

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

althrough if you made "tabbed interface", using of "pageshow" is better

1

I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.

1

The easiest way I found to deal with this was to use JQM + Steal. It works like a charm as long as you put:

<script type='text/javascript' src='../steal/steal.js?mypage'></script>

Inside of the data-role='page' div.

Then use AJAX to connect anything that can use the same mypage.js and use an external link (by using the rel="external" tag) to anything that requires a different steal page.

1

@Wojciech Bańcer

From the jQuery docs:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
0

Try this:

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});
0
$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});
1
  • 4
    Can you pleas comment your answer more?
    – user35443
    Dec 14, 2012 at 18:43
-2

The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:

<script>
  $(document).ready(function() {
      alert("This happens");
  });
</script>
5
  • 4
    Then why do the docs say "We recommend binding to [pageinit] instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system."
    – Leopd
    Sep 27, 2011 at 5:08
  • I think we're at cross purposes. I thought you wanted to know how to change the landing page. The latest documents say "However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pagecreate event." Sep 27, 2011 at 18:42
  • pagecreate also doesn't work for me (in 1.0b3), when the page is loaded via Ajax, only works without Ajax. Is it the same bug as with pageinit? Oct 1, 2011 at 12:45
  • 1
    Only seems to work when placing the <script> section within the <div data-role="page"> section (unfortunately not really clean html as per xhtml, but oh well...). Oct 3, 2011 at 9:45
  • I have a same problem. page init works only when it is placed in the body. This reported as a bug in github.com/jquery/jquery-mobile/issues/2540 but it is closed. However it looks like a bug to me.
    – Jovan MSFT
    Oct 27, 2011 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.