jQuery Forum

Funny I haven't seen any direct answers on this before... there are plenty of workarounds but I would love to hear if anyone has a "best practice" for doing this.

Unfortunately for now you will need to "stuff" that single method with the functionality for all your pages. I have been adding a class that I keep consistently formatted and unique to each div with a data-role='content' for each page such as "page-view-product"... the important part is that it's unique, consistency in this case is the "page-" prefix which is helpful. Then in the root index file I have the following code:

1.     <script type="text/javascript">
       $(function() {
           $("div[data-role*='page']").live('pageshow', function(event, ui) {
               var thisRootContent = $(this).children("div[data-role*='content']");
               if (thisRootContent.is(".page-view-product")) {
                   // run this pages stuff here
               } else if (thisRootContent.is(".page-contact")) {
                   // run this pages stuff here
               }
           });
       });
       </script>
   

I'm working on a more cleaner way to do this... I want to create an object of functions for mapping these, one function per page just like here, which will be named by those "page-" classnames or have some lookup to pass in the classname and pull the right function to call it.

One problem I ran into just recently was if a page varies content by using query strings (caching as id='contact.php?code=asdsa' and also another of id='contact.php?code=zzz' for example) then when I do any binding or dom traversing there are duplicate pages saved in the dom with the same "page-" class names, same element names in each, and this just completely messes up more advanced situations using this trick. So the trick will be when calling the methods in my mapping object for each page, I will need to call each one with javascript's .call and pass in the 'this' context from the above code as a result of the 'pageshow' method executing so I can specifically target which one for my traversals.

I think that jQueryMobile in the future maybe should offer a solution to this problem or at least some helper tools like the above mentioned solution. Using jQM speeds up development but these javascript issues can slow it right back down trying to find workarounds. It would be nice if they built some mapper tool where we could markup pages with another attribute and map them to functions nicely.

Any thoughts on this idea or other solutions for a cleaner, more organized approach for slightly more JavaScript intensive mobile apps with jQM?

Thanks for the reply! After I've read your solution I started playing around and worked as follows. Each page has a unique id:

1. <div id="page-customers" data-role="page" data-theme="b">

Each page has its own Javascript. I filter on the id like this:

1. $('[data-role=page]').live('pagebeforeshow', function (event, ui) {
2. 
   
3.                  if (this.children[0].id == "page-customers") {
4. ...

and place my code for that page within the if. This solution is not very optimal but seems to do the trick.

I implemented my final solution this morning that solves all my problems with this issue, at least for now. I have a single JavaScript file I include on my root index page of the jQM app and this is the portion of it that deals with running my individual page logic. I am already in the habit of keeping all my website's page logic organized into JavaScript "namespaces" so keeping all the logic together like this does not bother me one bit and can easier to browse through.

1. if (typeof HNSITE == 'undefined') HNSITE = {};
   if (typeof HNSITE.Mobile == 'undefined') HNSITE.Mobile = {};
   
   // ***************************************
   // Execute Main Document Initializer
   // ***************************************
   $j(function() {
       // Page show events
       $j("div[data-role*='page']").live('pageshow', function(event, ui) {
           // Execute individual page logic
           HNSITE.Mobile.Pages.Dispatcher.call(this);
       });
   });
   
   
   // ***************************************
   // Individual Page Logic
   //  --> markup page's content role with 'hnsite-page-contact-us' and add corresponding method below named 'contact_us'
   // ***************************************
   if (typeof HNSITE.Mobile.Pages == 'undefined') HNSITE.Mobile.Pages = {};
   
   // ==> Runs the initializer for each page
   HNSITE.Mobile.Pages.Dispatcher = function() {
       var thisPage = this,
           thisRootContent = $j(thisPage).children("div[data-role*='content']"),
           pageClass = thisRootContent[0].className.match(/hnsite\-page\-[a-z\-]+/ig);
      
       if (HNSITE.Utils.IsNullOrEmpty(pageClass)) return;
       else if (pageClass.length > 1) return;
       else {
           pageClass = pageClass[0].toLowerCase().substring('hnsite-page-'.length).replace(/\-/g, "_");
           if (typeof HNSITE.Mobile.Pages[pageClass] == 'function')
               HNSITE.Mobile.Pages[pageClass].call(thisPage);
       }
   };
   
   // ==> Vehicle Details Contact Page
   HNSITE.Mobile.Pages.vehicle_contact = function() {
       var pageContext = this;
       // rest of this pages code using pageContext every time to prevent possible bleeding over
   };
   

This solution keeps my 'pageshow' event clear of clutter, all my page logic organized together, and makes adding individual page logic a breeze with that automagical feel to it.

2 mikethecoder

Very interesting short code! I will test this next week. We are getting there :) I am curious if this still works after some page transitions. Did you verify this? If so it would be great :D

Attached is a full app example I just created for demonstrating how I manage the javascript in the apps. The app I've been developing recently is fairly complex and using this solution has created no additional problems for me so i'll be using this in all future sites until something better comes along one day perhaps.

There could be a few variations to using this solution... I went with classes instead of IDs for no particular reason, just a bit of a habit for how I design (I am reserved in my ID use typically). I use the same classes to "prefix" individual page css (included this example in solution zip too) to be consistent in their use as page identifiers.

The important thing to remember when using this method is always use the page context when using selectors for individual page logic since your entire app is cached so there could be multiple IDs across pages etc so often depending on which pages the user has clicked, it could screw up your bindings unless you do this. Also consider the pages state... since pages cache, anytime you bind something you must always unbind first so it doesn't double up the events from last time the page was viewed.

Hi all, The event you're looking for is pagecreate, which is fired after a new page has been appended and enhanced. It only fires once per page, unlike pageshow and pagehide which fire each time the page is shown or hidden. You can also use pagebeforecreate, to manipulate the page before jqm auto enhances it (and you can return that event false to prevent that enhancing from occurring at all). These are all documented in the API section of docs. Hope that helps!

Thanks for sharing that info... will be very useful. I like the automation and organization I get with the current solution I'm using but for performance reasons I definitely want to take advantage of that. Off the top of my head I wouldn't mind creating page named objects instead of functions like I do currently... each would contain two functions, one for pagecreate and another for pageshow. This way pagecreate will handle all the wiring up of events and overriding of jQM and pageshow will handle "page state" and any resetting that must occur each time it's viewed. 

I too downloaded the mobile sample and the paging hangs in Chrome 8.0.552.215.  It does not hang in Firefox.

@mikethecoder I'm interested in taking a look at your new pattern. If you find the time, could you upload a revision to your previous code?

Moved your new js file into the old example, can't get any of the events to fire (note liberal application of alert()). 

And how does it work with pages on other files? Or even with pages on a dialog page?

MikeTheCoder,

MikeTheCoder,

When JQM create a dialog page this is not included in the History for navigate, back, etc. And the script to attach some custom script in that page doesn't work becase none .live('pageshow' or .live('pagecreated' is fired when I navigate to another html file with rel="dialog".

Well If I found how attach a script in a external file with dialogue I'll post it.

Here I  go with the code of my example:
Files
index.html
dialog.html
custom-script.js
In index.html are these imports:

1. <script src="jquery.min.js"></script>
2. <script src="custom-scripting.js"></script>
3. <script src="jquery.mobile.js"></script>

The versions are 1.4.4 for jquery and 1.0a2 for JQM.

dialog.html y a simple "pop-up" window with two buttons.
with this

1. <div data-role="page" id="dialog">

custom-script.js contains:

1. $('[data-role=page]').live('pagecreate', function (event) {
2.     if (this.id == "example") {
3.         iniExample();
4.       }
5.     if (this.id == "./dialog.html") { //i also try "dialog" as ID
6.         iniDialog();
7.      }
8. });

and also

1. $('[data-role=page]').live('pageshow', function (event) {
2.     if (this.id == "example") {
3.         showExample();
4.     }
5.     if (this.id == "./dialog.html") {
6.         showDialog();
7.    }
8. });

The lines withs example are fired when I acces to index.html and JQM create the pages, and every time I show the page "example", but the functions relative to dialog are never fired with this code.

To acces to dialog.html y have this

1. <a id="acept"  href="./dialog.html" data-role="button" data-inline="true" data-theme="b" data-transition="slide" data-rel="dialog">Yes</a>

The dialog opens ok but as the event is never fired I can't attach my specific code on this page.

So far on each page all I do is create a new wrapper function, then bind that to every div page with pageshow in the inline js - since only that one page shows it calls the wrapper function which runs my JS then I call die with the function. I should mention the script must go in the div data-role=content.

Hey guys, I'm trying to get mikethecoders solution to work with my android phonegap test project, but I've been unsuccessful thus far. Could someone take a look at my project and see whats up?

Adding mike's code seems to be introducing a number of bugs into the project (probably because I'm doing something wrong, since no one else has posted about these things)
- The temperature page's footer is does not position itself at the bottom of the screen
- Attempting to return to the money page after going to the temperature page doesn't work (transition fires but stays on temperature page)
- Any logic included in mikes code is not firing. (Create, Show, Hide)

I appreciate the help guys, I need this to work in order to tie functions to click events of buttons. I've been unable to get this to get that working so far.

It might be worth pointing out that version Alpha 3 was released at the beginning of feb and looks to have changed the way the code needs to work.

Hi. Noob here. Been playing about with jquery mobile and really liking it so far. I'm no jQuery expert so I love how easy it all this.

At the moment I have seperate pags:
page1.htm
page2.htm

page1 calls page2 and on that page is a link (<a id="test" href="'#">test</a>)

I have this setup in my <head>

1.     <script src="js/jquery-1.5.min.js"></script>
2.      <script src="js/custom.js"></script>
3.     <script src="js/jquery.mobile-1.0a3.min.js"></script>

So where abouts do I add my custom functions to target, in this example, the a#test element, to add a click event?

Apologies if this has been answered above but I've tried the pagecreate event but can't get it working. Maybe I just have it in the wrong place? Do I still use $(document).ready(function()?

Thanks!

Hey Guys this is great, I do have a question with regards to paging. When I do a search and the results page loads, the javascript in NAMESPACE.Pages.PAGEID for that page executes as expected, However when i click the paging links on the bottom of the page, it reloads the page for the next set of results however the javascript does not executes. Is it because the PAGEID is the same on every subsiquent page load?

I've been using:

There is one big problem: If the content isn't loaded via Ajax, the pageshow-event is never triggered.

For example:

On "http://mysite.com/#page-x" $('[data-role=page]').live('pageshow', function (event, ui) { .. }); would trigger after the content was loaded.
but "http://mysite.com/page-x would not trigger the event. Which leads to no extra javascript executed on the page.

Is there a simple way to consider both possibilities? This is especially necessary for devices which don't get the ajax functionality.

Edit: I got it:
https://github.com/jquery/jquery-mobile/issues/508

To address the first question:

$(document).bind('pageinit', function () {...});