pageinit event not firing on direct load#2540

Labels

Milestone

Assignee

12 participants

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:

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.

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

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

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.

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.

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?

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

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

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.