Building an AJAX Based RSS Pod

July 28, 2006 coldfusion

(This post is more than 2 years old.)

So by now everyone knows that I love Spry, but I thought I'd build another cool little example for folks to look at. First, take a look at the example. What you are seeing is a pod based on the RSS feed from MXNA. If you sit there for a few minutes, you may notice something. The pod automatically updates. How is this done? You can view source, but let me break it down for you:


<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>

The above lines load the Spry framework.


<script type="text/javascript">
var theFeed = "http://weblogs.macromedia.com/mxna/xml/rss.cfm?query=byMostRecent&languages=1";
var mydata = new Spry.Data.XMLDataSet("xmlproxy.cfm?xmlfeed="+theFeed,"//item", { useCache:  false, loadInterval: 10000 }); 
</script>

Line one simply sets the feed. Line two passes the feed to a local ColdFusion file. It uses CFHTTP to fetch the RSS and return it to the browser. Why do I have to do this? Browser security restrictions insist that I only call resources from the same file. I made my CFM file open to any URL, but you probably want to limit it to a set of URLs, or not even allow Spry to set the feed.

The tricky part is the automatic reloading. That's done with this difficult piece of code:


{ useCache:  false, loadInterval: 10000 }

Pretty hard, eh? The useCache statement tells Spry not to cache the results. (Duh.) The loadInterval statement tells Spry to reload the data every 10000 ms.

That's it. You could use this pod on your blog and make a "live" view of MXNA (or any other important blog).

I also do two other things I haven't talked about in my Spry posts yet. First, you may notice that many Spry examples have a "flash" when they load. The "flash" is a quick display of the Spry tokens that goes away when the data beings to load. Luckily there are a few ways to handle this, and I show two in my example. Consider this block:


<div spry:region="mydata" class="SpryHiddenRegion">
<div class="pod">
<span spry:repeat="mydata">
<a href="{link}"><span spry:content="{title}" /></a><br>
</span>
</div>

</div>

We have two things going on here. First, notice the class="SpryHiddenRegion". In my CSS I set this to:


.SpryHiddenRegion {
	visibility: hidden;
}

The name, "SpryHiddenRegion", is noticed by Spry and will automatically be removed when data is loaded. Now notice:


<span spry:content="{title}" />

This does two things. First, the {title} token will not show up when the pages loads. Secondly, if I had used a "wrapping" format like so:


<span spry:content="{title}">Hello non-JS peeps</span>

If the user has JavaScript disabled, they will see the content inside the span. (You can, of course, use the noscript tag for this type of message as well.)

For another version of my example, see this earlier version. It uses a mouse over to let you read part of the entry and has the debugging turned on.