jQuery Mobile pageinit/pagecreate not firing

Question

I have 5 pages - for ease lets say:

• one.html
• two.html
• three.html
• four.html
• five.html

When I load each individual page, both pageinit and pagecreate are firing correctly.

The Problem:

When I go from one.html to two.html, pageinit and pagecreate both fire, BUT when I go back to one.html (from two.html), pageinit and pagecreate DO NOT fire.

Why is this and how can I always fire pageinit and pagecreate on page load, as well as navigating through each page?

Update:

For each page I have:

<div data-role="page" id="page-name">

 // content
</div>

To test the order at when things are firing I do:

$(document).on('pagecreate','[data-role=page]', function(){
  console.log('PAGECREATE');
});
$(document).on('pageinit','[data-role=page]', function(){
  console.log('PAGEINIT');
});
$(document).on('pagebeforeshow','[data-role=page]', function(){
  console.log('PAGEBEFORESHOW');
});
$(document).on('pageshow','[data-role=page]', function(){
  console.log('PAGESHOW');
});

How do I use the pagechange to always call the pageinit and pagecreate

Answer 1

You're checking for the wrong events, pageinit and pageshow are what you should be concerned about.

pageinit fires everytime a page is loaded for the first time, jQM caches pages in the DOM/memory so when you navigate back from two.html to one.html, pageinit won't fire (it's already initialized)

pageshow fires everytime a page is shown, this is what you need to be looking for when you navigate back from two.html to one.html

Together you can pull off a lot of clean code, use pageinit for initializing, configuration etc and update your DOM to the initial state. If you have dynamic data on the page that may change between views, handle it in pageshow

Here's a good design for larger websites that we use in a production environment:

1. bind a live event to all pages/dialogs pageinit and pageshow events in some include that is on every page:

   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

2. I reference each page with a name: <div data-role="page" data-mypage="employeelist"> In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code

3. Now no matter what entry point a user lands on your site, all the handlers for all the pages are loaded. As you may already know, when you navigate to a page, it only pulls in <script/> within the div[data-role="page"] - ignoring any JS in the <head/>, placing separate JS on each page is a mess and should be avoided in any large site I believe

4. Try not to use blanket selectors in your jQuery, e.g. $('div.myClass') since this will search all of your DOM which may have more than one jQM page in it. Luckily in the live event handler for pageinit/pageshow mentioned above, this refers to the current page. So do all DOM searches within it, e.g. $(this).find('div.myClass') this ensures you are only grabbing elements within the current page. (of course this isn't a concern for ids). Note in the pageshow event you can also use $.mobile.activePage, but this isn't available in the pageinit, so I don't use it for consistency

I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event

The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. But if your site really is large I suppose you could look into RequireJS.

An advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page. If all your JS is available on entry, you can now put debugger statements and debug much more easily!

Answer 2

I believe pageinit and pagecreate are both only called once when the page is first initialized and created in the DOM, respectively.

You may want to look into the pagechange event http://jquerymobile.com/test/docs/api/events.html

Answer 3

You require a thourough read of the jQuery Mobile event documentation: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

The above links gives some great insight into when each of the events fire, here are a couple samples from the page:

pageinit

Triggered on the page being initialized, after initialization occurs. 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.

.

pageshow

Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it: prevPage (object) A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.

To actually answer your question, don't use pageinit, use pageshow. pageshow fires on the initial showing of a page (just after the pageinit event is fired on the element) but also on subsequent visits to the page.