Skip to content
This repository

pageinit event not firing on direct load #2540

Closed
leopd opened this Issue September 26, 2011 · 17 comments

12 participants

Leo Dirac Kin Blas Mathias Lin Immo Salo JocaPC aja328 Stefan Richter willkriski Jasper de Groot Basem Emara Serban Ghita Maurice Gottlieb
Leo Dirac

The docs for the pageinit event say

We recommend binding to this event 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.

But this simple test shows that the pageinit event does not fire if the page is loaded directly:

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

Personally, I'd prefer it if it works how the docs say it should.

Kin Blas

@leopd

I just tested it and it IS firing. Are you linking against the latest source from the HEAD?

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
Kin Blas

@leopd

I just verified with your test case above that the alert is firing when using the JS/CSS from the HEAD. Note that the fix for this was made AFTER Beta 3.

Kin Blas jblas closed this September 26, 2011
Mathias Lin

It still does not work for me. The pageinit is only fired when I load the page without Ajax, with Ajax, it's not called. I used the exact code sample from @leopd, just replaced the css/js with the ones from @jblas's comment above.

See for yourself: http://bit.ly/qlUL7R

The first page is test1.html, with a link to test2.html. When you click on that link, there should be an js alert, but it's not coming up. However, when you load test2.html in the browser directly, it's showing.

Update: I also tested it with the 1.0RC1 code, still not working.

Update: ok, I got it working, but it only seems to work when placing the

Leo Dirac

@mathiaslin I opened a second bug for the AJAX issue
#2636

How did you work around it? You moved the script code inside the <div data-role="page">?

Mathias Lin

@leopd: yes, I moved it inside the page. Which makes sense (unfortunately it's not xhtml compliant), since as per documentation, ajax doesn't load anything that's in the head section, only loads the page section.

Immo Salo

Just spent an hour trying to get this working... thanks @mathiaslin! I got it working by placing the jquery inside the div :)

JocaPC

I don't understand is this a bug or feature? If we should not use pageinit in the heading, then I assume that documentation on the http://jquerymobile.com/test/docs/api/events.html should be changed and clearly state that page init would not work in ajax calls. Currently documentation page is misleading because it explicitly says that :
"To execute code whenever a new page is loaded and created, you can bind to the pageinit event. " It does not say that we should put in outside of head tag.

Kin Blas

@jocaPC

The pageinit event is ALWAYS fired for every page that is in the initial document loaded in the browser, and for every page pulled in dynamically via AJAX. The issue folks are having here is that they are wanting to register event handlers that listen for pageinit from script in the external pages that are being loaded when the user navigates to it. The one requirement the framework has is that if you want JS in an external page to be executed, it has to be embedded within the page content of the external document. This is because the framework only uses the markup of the first page in the external document, and throws everything else away. It does this because it has to avoid reloading duplicate JS and CSS files that may be referred to in the external document.

To re-iterate, the pageinit event is being fired, the issue here is how folks register their callbacks.

aja328

@jblas

What about for pages that involve the back button? What is the appropriate event to hook onto? I have been reading the above threads as well as #2637 on the behavior of pageInit. For pages that involve Back, I have had pageShow work well. Is that a best practice?

Stefan Richter

@jblas
Clearly the issue is not just about 'how folks register their callbacks', otherwise people wouldn't stumble over this issue time and time again. It is a best practice not to include code that relates to behaviour into the markup of the page, right?

The docs need to be updated IMO and make this much clearer.
I understand the reasons for why things are set up in this current way, but it's far from ideal.

willkriski

pageinit doesn't work for me even with the function all on the same page and loaded normally in a browser (no ajax). this is a bug. i have to put in with the html page section

Leo Dirac
leopd commented May 14, 2012

Over 17k views on SO point to this issue not actually being fixed. http://stackoverflow.com/questions/7544023/how-to-initialize-pages-in-jquery-mobile-pageinit-not-firing I'd re-open if I could.

Jasper de Groot
Owner
uGoMobi commented May 14, 2012

@leopd

Here is a fiddle that shows an alert on pageinit: http://jsbin.com/ewegaw/6/
Maybe you can explain what needs to be fixed?

Basem Emara

This is still an issue even with the 1.2 alpha release. The pageinit fires if it is loaded later in the app life cycle. HOWEVER, it does not fire if it is the first page being loaded. You can see for yourself here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html

1) Click on 'Show page "two"'
2) An alert will show saying "Page init fired!" (see code near closing body tag).
3) Notice the URL, close your browser and now go directly to page 2: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two . Pageinit never ever fires from here for page 2!

Is there please a workaround for this? Please acknowledge this is an issue.

Serban Ghita

@basememara i'm not sure it's okay to wrap the code inside

$(function () {
...
}

I'm using jQuery 1.2 alpha and the following call never failed me:

$(document).delegate('#productPage', 'pageinit', function(){
// do stuff 
})
.delegate('#checkoutPage', 'pageinit', function(){
 // do stuff
});

This is called in the <head> element, included from a .js file

Maurice Gottlieb

Hi @basememara

Here is a fiddle to demonstrate pageinit and other page event bindings:
http://jsfiddle.net/MauriceG/mQDZH/show/light (edit: http://jsfiddle.net/MauriceG/mQDZH/)

You can also go direct to #page2: http://jsfiddle.net/MauriceG/mQDZH/show/light/#page2 and see the events happen.

Maurice

Basem Emara

You guys are spot on. Pageinit works when I take it out of $(functiona(..)). I know the docs say not to use document.ready but it's hard to forget that habit and creates a trippy area. I appreciate the clarification.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.