Tuesday, October 19, 2010

A Simple JQuery Mobile RSS Example

With the jquery mobile framework in alpha release, I took it for a spin drive. I hadn't worked a lot with jquery much at all prior to this so it was a good learning experience all around. A couple gotchas I had learned the hard (timely way).

1.) The jquery $.get() and $.ajax() methods cannot load rss feeds from other websites. You have to use a proxy, or download the rss file and access it locally.

2.) Just because you have that rss xml file saved in the same directory as your html file doesn't mean squat. Again, you'll have to load your files onto a server like tomcat and test that way.

Here's the completed example. It loads a RSS file and creates a jquery mobile list. VERY few lines of code, which is why jquery rocks so well. Amazing for API calls, parsing, and accessing the html DOM.

Click to view source from there: http://vandalaysolutions.com/sva/sample2.html

Note, there is a bug in the framework with the <ul> not refreshing after I append (add)  a new <li> item...so after looping through and adding all the RSS items, I manually refresh the <ul> calling listview on line 26:

list.listview();

If you're new to JQuery, check out this post. It explains why/how the "$" signs are OK as Javascript declarations and some great examples of useful DOM transversing.

No comments: