Question

There are two pages in my jQuery mobile application. When a list item on the first page is tapped, the user is taken to the second html page. The second page has a navbar which has two buttons. I want these two navbar buttons to show/hide a div in the content area of the page. I couldn’t find which event handling mechanism to use. document.ready doesn’t work, pageinit doesn’t work also. Can someone direct me to a sample?

Answer 1

If you mean you have two (or more) separate HTML files you need to understand how to handle events properly in jQM, so here’s a quick intro.

1. jQM adds even separate HTML files into a single DOM, thru loading them by AJAX

2. Each page that is loaded via AJAX fires a pageinit and a pageshow event, difference being that pageshow re-fires when you navigate back to the page

3. Every page after the first page only loads content within the <div data-role="page/dialog"></div> element, therefore if your subsequent pages have JS in the <head/> that is not pulled in perhaps you have your second page’s navbar JS code in your second page’s , this is a big thing to note

4. So how do you manage your JS and keep it organized? In our production jQM app we load all our JS at the start, it’s not too big minified anyways. We have one entry point and the JS code is included on every page, so whichever page you enter from loads all the JS we need just once – and no more JS is loaded. Warning if you have JS within your <div data-role="page"/> it will refire everytime you visit the page only do this if you know how it acts

5. Your entry point should be a single function $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){ now every page/dialog that loads will trigger this event handler, you can determine if it’s pageinit or pageshow based on event.type AND which page loaded by adding a data-attribute or class or anything you want to the <div data-role="page" data-pageIdentifier="home etc.."></div> – then just use a switch statement to handle for all the cases.

6. You now have all the info you need and this is a handy reference to the current page, bind event listeners with the .on function, so you listen at the page, NOT the document root, e.g. your navbar stuff. – If you use .live it will listen for the entire document (not all pages are DOM cached though), regardless this is bad for performance! Actually within a page, we always use .find starting from the page, e.g. $this.find(‘div.something’), we never use $(‘div.something), that will crawl your entire DOM possibly hitting other pages AND worse giving you erroneous results not within your current page so another big mistake is to do something like $('img.selectItem').bind('click'... you may have an img.selectItem in another DOM cached page, so you’ll bind to more than you want to – I would do something like $this.find('img.selectItem').bind( (where $this is the current page)

Obviously we had a lot of code eventually, so we wrote a handler object that called functions in other JS files – and you can use RequireJS but we never needed to