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.
Archived Comments
Very nice. Too bad it shows up without working links in Opera 9.01 beta. Guess I'll report it to the developers.
You should also test with the released version of Beta. Typically companies try to support the released versions.
Since you're basically creating an infinate loop I wonder if spry does a good enough job with actually removing objects from the dom to fight against firefox's tendency to be a memory hog and blow up on you if you're not careful. Maybe setting the interval to somthing ridiculous like 100ms would show the truth.
Just curious Ray why you are linking to Ez-Ajax.com?
Check out who owns that:
http://whois.domaintools.co...
Are you paying tribute to the rabid developer?
Ray,
I know you are not a fan of IE but, like Opera, the links do not show up in the current IE7 build.
HAHAHA, I used to work for spry. I quit last year, but I still host all my stuff with them. Maybe I know you, how long have you been hosting with them?
Peter: No - freaking - way. That is hilarious. To be honest, I just use Google. Part of me doesn't care if he wants to pay for advertising, on the other hand, I wouldn't want anyone to pay for his services. I'll add his ad to my banned list. Thanks!
Chris: I meant Spry as in the Adobe AJAX framework.
It would be even better to show the ad and encourage viewers to click the ad!
That is against the rules Gus. At the end of day, I do not want people to think I support him.
IE: It is broken in IE6 as well. I'll file a bug report. Thanks guys.
uh... is that a google ad? it doesn't look like it to me.. *shrug*
There -was- an ez ajax ad both from google and text-link-ads.
Um...I still see one between the Quick Guides and Latest from EgoAddict. It's in its' own box as well. Is that really Google too?
Here's the code
<ul id="links49707">
<li><span><a href="http://www.ez-ajax.com">CF AJAX Development Made Easy</a></span></li>
</ul>
That one will stay until the end of the month. He purchased it via text-link-ads.com. I've already sent a note to them to ensure he doesn't repurchase. (At my site anyway.)
Thanks again for the warning guys.
Ray, for those who may not feel up to creating the xmlproxy.cfm on their own, do you offer it somewhere? I was about to point someone to this, but I could see a beginner being stumped. Is it in a previous entry, perhaps?
I didn't not offer it for a download, but let me write a blog post in a bit and I'll share the code. It is super trivial, but yes, I can see some folks needing it. (I can also talk about how to lock down the URLs.)
Thanks, Ray. And for readers here, he has offered it at:
http://ray.camdenfamily.com...
FYI, the IE bug is fixed. Issue was that I was using <span .../>. When I switched to <span ..></span> it worked ok. IE bug, not Spry.
Repeat after me - it is Microsoft's fault. ;)
Hi Ray - is the link broken to your example page? http://ray.camdenfamily.com...
I've tried i.e. and FF?
It is working now. Must have been a gremlin.
I have tried all day to get this to work with no luck. It works with firefox, but doesn't work with ie7 and I haven't checked on ie6. I am using the 1.4 spry version and was wondering if this was 1.5. I did copy all your code and tried that with no luck. I am using MX 7.02 with DW CS3. any suggestions?
It doesn't show up at all in ie7. just completely blank. I also trying to use an xml rss feed from another site, oracle. I did try the ie bug that you said it was and it still doesn't show. Thanks Link
Sorry about this, but I figured it out, I think its an encoding issue. If you try to use the oracle rss feeds they have some funky character sets, like copyright etc and wouldn't work but I tried others and poof it works. Now I have to figure out this issue and I should be set, Thanks for the tutorials, you have been alot of help.
Link
Glad you got it. Can I still take credit even though I didn't do anything? ;)