Dave Ferguson's Blog - jQuery Mobile

jQMobile version 1 and ThemeRoller released

Fri, 18 Nov 2011 03:56:00 -1200

I must have been sleeping under a rock because I missed the release announcement. jQuery Mobile version 1 is finally released. You can read all about it here... http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/ Congrats to all involved on creating such a great product. ThemeRoller for jQuery mobile was released as well. If you were at Adobe MAX 2011 you probably saw it demoed there. Initially I was very excited about the tool. However, after 5 minutes with it I was kinda bummed out. But, take a look at it and form your own opinion... http://jquerymobile.com/themeroller/ Till next time, --Dave

jQuery Mobile Feed Viewer

Tue, 05 Apr 2011 18:56:00 -1200

A little while ago I posted a blog on how to style dynamically loaded content with jQuery Mobile. My goal in that was to create a mobile site that would have a left navigation pane and right side content. It was more of an exploration into what was feasibly possible using JQM. So, I decided to take that knowledge and build something that actually did something.

In the end I created a mini feed viewer. Using the layout style described above I created a single page viewer all in JQM. There is just one jQuery function in the code to handle the nav clicks. The whole thing is very simplistic but it shows some other interesting ways you can use JQM.

You can check it out here: http://blog.dkferguson.com/demos/feedViewer/index.cfm

Till next time,

--Dave

jQuery Mobile; styling loaded content

Tue, 15 Mar 2011 05:03:00 -1200

With today's dynamic systems getting them to load properly is always a challenge. Especially if you have content loaded via Ajax after the initial load. This can be the hardest part. Even more so, things like jQuery Mobile make it even harder. This is because jQuery Mobile rewrites the html that is initially loaded to be styled and work properly.

So, lets take a basic example and figure out how to style some ajax loaded content.

Lets look at a basic example of some jQuery Mobile page. Not thing fancy here, this just creates a basic page with a header and footer with some minor content.


 
 
	 
	Page Title 
	
	
	
 
 



	
		Mail Reader
	


		
		
		
							
				 
					My Email 
					Inbox 
					Outbox 
					Other 
					Feeds
				
			
			
			
			
		
	


	 
		 
			 
				Summary 
				Favs 
				Setup

Rendered it looks like this:

So now lets take the base and put a little JavaScript in to it. This script will handle the click and load some external content.

The return from the load call contains this:


	 
	This could be a subject 12 
	This could be a subject 0 
	This could be a subject 0 
	This could be a subject 0 
	This could be a subject 0 
	This could be a subject 0

When rendered I now get this:

Obviously this is wrong. The returned content has no styling or any "jQuery Mobile" magic in it. Even the number is off on the far right.

This happens because jQuery Mobile does not know to style the content. It is not that it can't, it just doesn't know it should. The content is pulled in after the styling has been applied. So, the question is, How can I get jQuery Mobile to apply its secret sauce to the loaded content?

Well, this was no simple task. I tried more things than I can count. Had many more failures than I would have liked to. At one point I got it to work fairly easily. However, subsequent loads would break the UI. I finally ran across a forum entry that I pieced together with other findings that gave me enough info to create a solution.

The first thing was not not use load. Load, while a great way to get content into something was not the right way to go here. What I I needed was to get the content and store it in a var. Then I had to "coherse" jQuery Mobile into doing it's magic.

So, a simple modification to the JS and I get the magic I am looking for.

So what is the big change? Well, I replaced the load with get. This allowed me to store the result in a var. I could then take that return and put it into the div. Yes, load does that for me in one line. However, adding the ".page()" to the load chain had no effect. This way the page() worked. However, to be honest, I have no idea what the page() function does. I just know it has to be there. The next part of the magic sauce was the next line. Now just like the page function, I have no idea what this does either. All I know is that these two lines of code allow me to produce the result below.

Well, there you have it. A few magic beans and BOOM.

Till next time,

--Dave