We have been playing about with jQuery mobile at the office and its a great way to deliver specific mobile content and of course it works with PhoneGap for compiling those apps to (near native).
But we had a couple of teething issues due to the documentation being a little all over the place and the examples being a little too simple from the recommended approaches, and the voodoo it does.
First Glossary, in jQuery mobile each page is a screen displayed in the browser that is transistioned (sometimes in a fancy way) to or from. These pages are essentially (ootb)
See demo MultiPage-Template
Now this is great for a couple of pages all based on ajax filled content, but where there are many pages then thats the time to split those pages out onto the file system into seperate documents.
The documentation recommends this approach because as the new page is loaded the last page is removed from the DOM thus saving memory (there are techniques to force caching of pages). This is where the some of the confusion can arise as there are so few examples explaining whats happening.
The default behavior for jQuery mobile when navigating about these separate htm files that are defined as pages of the app is that it uses ajax to load them. It can then take that content and inject it into the DOM and then transition between the two.
The problem we encountered due to the lack of demos and not reading docs is that where did we put the scripts the css what happens on page load etc. Well it’s actually been made really simple and the thing to remember is this –
Taken from the documentation
Scripting pages->Scripts and styles in the head
http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-scripting.html
When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link’s
hrefto formulate an Ajax request (instead of allowing the browser’s default link behavior of requesting thathrefwith full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response’sbodyelement (or more specifically thedata-role="page"element, if it’s provided), meaning nothing in theheadof the page will be used (with the exception of the page title, which is fetched specifically). Please note that scripts loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.This means that any scripts and styles referenced in the
headof a page won’t have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that theheadof a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it’s common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assumeheadscripts are only expected to execute once per browsing session.
This is the key to how it all works under the hood.
So when coding a simple app in jQuery mobile in multiple pages then a simple layout might be this. This is a simplification of the jquery mobile multi-page boiler template split across two files.
The second file does not need any of the jquery, css, or other js files. As the navigation system looks for a div of data-role page and squirts it in. NOTE multi-page/Multiple Page combos are not allowed it will likely fall on its face, so dont stick more than one date-role=”page” into these Multiple Page designed apps.
Main.html
|
Multi-page template $(‘#home’).on(‘pageinit’, function () {
function Yay() {
One
I have an
Link to Other Page:
</div> </body> |
Page2.html
| <!DOCTYPE html> <html> <head> <title>Page Two</title> <body> $(‘#two).on(‘pageinit’, function () { console.log(‘page two pageinit’); Yay(); //Call a function in the parent container, cos Im just injected });
Two
I have an id of “two” on my page container. I’m the second page container in this multi-page template. Notice that the theme is different for this page because we’ve added a few </div> </body> |
So that being the case where do I stick the code. Well consider it like this if its a library code stick it in the home page as that outer page is always there and loaded, however when you need stuff to happen that script should be in the page <div> as it will be loaded and injected into the main page container and executed at that point.
There are lots of other things to learn about events and injections but if you can get this bit right then the rest should just follow.
I strongly urge you to read all of the docs on jquery mobile especially around pages as understanding this navigation and the weird vood0o it does with the navigation is key to writing your code in the right place.
Leave a Reply