How to initialize pages in jquery mobile? pageinit not firing

Question

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.

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 '11 at 07:36
@SutikshanDubey Did you ever figure out why that was happening? I have the same issue... — J2N, Jun 22 '12 at 14:11
@JLaw here are my questions on SO http://stackoverflow.com/questions/7741888/jquery-mobile-ajax-navigation-in-single-page-template http://stackoverflow.com/questions/7724959/asp-net-mvc3-jquery-mobile-pages-ajax-code-binding-using-pageinit-event and I am doing killing events on hide. But still not satisfied with solution i m using. — Anand, Jun 26 '12 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 05 '12 at 19:50

score 66 · Accepted Answer · answered Oct 02 '11 at 20:14

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

answered Oct 02 '11 at 20:14

Wojciech Bańcer

901
6
3

1

Can confirm this solution works with the 1.0 release as well. Not sure what the issue is. – Ravishankar V Nov 21 '11 at 09: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
, 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 02 '12 at 01:09
3

After a long search, I finally found this in [Jquery Mobile's document](http://jquerymobile.com/test/docs/pages/page-scripting.html): 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. – Kien Truong May 11 '12 at 10:42
That pageinit was what saved me at http://stackoverflow.com/questions/8153236/jquery-mobile-changepage/12546650#12546650 – Junior Mayhé Sep 22 '12 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 '13 at 07:48

score 21 · Answer 2 · edited Sep 21 '12 at 23:52

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/

edited Sep 21 '12 at 23:52

Littm

4,923
4
30
38

answered Sep 11 '12 at 16:36

geralOE

484
4
7

score 9 · Answer 3 · answered Sep 28 '11 at 03:18

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.

answered Sep 28 '11 at 03:18

Leopd

41,333
31
129
167

1

1.0 RC1 was just released, and it fixes this issue. – Ofri Raviv Sep 30 '11 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): http://bit.ly/qlUL7R – Mathias Conradt Oct 01 '11 at 13:02
Related bug in RC1 where pageinit does not fire on ajax-loaded pages: https://github.com/jquery/jquery-mobile/issues/2636 – Leopd Oct 07 '11 at 05:31
2

I just verified it's still a bug in 1.1. – fengd May 11 '12 at 08:31
This bug still exists in 1.3.2, the script only excutes if you place it inside a div – Sudheer Aug 04 '13 at 18:59

score 2 · Answer 4 · edited May 24 '12 at 15:52

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!

edited May 24 '12 at 15:52

Josh Darnell

11,304
9
38
66

answered May 24 '12 at 13:12

Ravindra Padhi

21
1

Stancho Stanchev · Answer 5 · 2012-11-22T23:46:49.770

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

score 1 · Answer 6 · edited Aug 28 '12 at 20:22

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.

score 1 · Answer 7 · answered Mar 01 '13 at 18:12

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

answered Mar 01 '13 at 18:12

Mike Cottier

109
2
1

score 1 · Answer 8 · answered Dec 29 '11 at 14:26

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.

answered Dec 29 '11 at 14:26

Will Kriski

96
1

Stanislau Ladutska · Answer 9 · 2015-05-08T14:26:54.027

0

$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});

edited May 08 '15 at 14:26

answered Dec 14 '12 at 18:26

Stanislau Ladutska

158
1
9

4

Can you pleas comment your answer more? – user35443 Dec 14 '12 at 18:43

score 0 · Answer 10 · edited Oct 29 '12 at 19:57

0

Try this:

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});

edited Oct 29 '12 at 19:57

A.M.K

16,727
4
32
64

answered Feb 22 '12 at 15:22

Mekkon

1

score -2 · Answer 11 · answered Sep 26 '11 at 11:58

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

answered Sep 26 '11 at 11:58

Tim Niblett

1,187
7
8

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 '11 at 05: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." – Tim Niblett Sep 27 '11 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? – Mathias Conradt Oct 01 '11 at 12:45
1

Only seems to work when placing the – Mathias Conradt Oct 03 '11 at 09:45
I have a same problem. page init works only when it is placed in the body. This reported as a bug in https://github.com/jquery/jquery-mobile/issues/2540 but it is closed. However it looks like a bug to me. – Jovan MSFT Oct 27 '11 at 21:04

How to initialize pages in jquery mobile? pageinit not firing

11 Answers11

Linked