How To Use Spry's Spry.utils.updateContent Function To Update Content Without Reloading The Web Page

Posted At : December 17, 2006 12:09 PM | Posted By : Bruce Phillips
Related Categories: Spry

Adobe released update 1.4 to their Spry ajax framework. You can learn more about Spry and download the 1.4 release here: http://labs.adobe.com/technologies/spry/. I'm impressed with Spry and how easy Spry makes complex ajax functions and DOM manipulation.

New in Spry release 1.4 is a JavaScript function called Spry.utils.updateContent that you can use to update content in a web page without having to reload the entire page. The documentation for the various Spry capabilities (dataset functions, utility functions, widgets, and effects) has been much improved in this release. However, besides a sample web page that uses Spry.utils.updateContent, this function is not clearly explained in the documentation provided with release 1.4 (at least I could not find it - if there is documentation for this function please post a link to it in a comment).

Since I plan on using this function on some web pages I'm currently updating, I wanted to ensure I understood how to use the function correctly. The Adobe sample web page provided in release 1.4 for Spry.utils.updateContent is a bit complex because that page's author combined a Spry effect with the updateContent function. I wanted to build my own example that just uses the updateContent function and also has lots of commenting in it so I can document how the updateContent function is working.

Please post a comment if my example and its explanation are not clear or if you have additional information on how to use the Spry.utils.updateContent function.

Comments (17) | Print | Send | del.icio.us | Digg It! | Linking Blogs | 18039 Views

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment] [Subscribe to Comments]
Cool example. I linked to it from my blog.
# Posted By Raymond Camden | 12/17/06 11:31 AM
I love adobe.
this is great.
# Posted By John Allen | 12/17/06 8:08 PM
I was just playing with Yahoo's YUI tab component and using their functionality to pull content into a tab from a separate file. My main goal, though, was that any links in that content area trigger the src of that link to load into the tab. I have worked with it quite a bit but have yet to get it perfected. Seems it may be possible with Spry by what I see here. Just a matter of getting js to catch the event and redirect the laod to Spry.Utils.updateContent(). Have you seen anything that may lend a helping hand in that area? I have downloaded 1.4 and am working with it now, but am a spry newb. ;-)
# Posted By Joshua Cyr | 12/18/06 10:56 AM
Joshua:

I cannot think of anything in Spry 1.4 that would do exactly what you want.

Bruce
# Posted By Bruce | 12/18/06 5:07 PM
It is easy enough to get dynamic data from an outside file into tabs.
http://dev.besavvy.com/Spry_P1_4_1214/samples/tabb...#
(see the modified example with tab 1 text link triggering loading of an outside file).

The tricky part is to then use event listeners to detect the clicks and redirect. I think I will try merging the event code from yahoo with spry to see if that will work.
# Posted By Joshua Cyr | 12/19/06 7:20 AM
I wonder - would it make sense for us to make an enhancement request so youc an create a div and do something like, spry:source="url". You would either leave the inside of the div empty, or it weould represent the "loading" text. When the tab becomes active, Spry would handle the loading of content for you.
# Posted By Raymond Camden | 12/19/06 7:28 AM
It would be handy for sure, though honestly Spry.utils.updateContent makes it really pretty easy.

Spry.Utils.updateContent('apDiv1', 'frag1.html');

Where apDiv1 is content inside of the tab.
<div class="TabbedPanelsContent"><div id="apDiv1">Tab 1 content</div></div>

The way dynamic tabs work in Yahoo UI is something like:

tabView.addTab(new YAHOO.widget.Tab({
label: 'my label',
dataSrc: 'mypage.cfm',
active: true,
   cacheData: true /* only load once */
}));

So the ability to set in one quick step the active tab, caching and the source (or static content) is handy. Of course you can do it with static html as well, which is very similar to spry.
# Posted By Joshua Cyr | 12/19/06 8:26 AM
Thats not what I meant. What I meant was - I want to specify the content of tab 1 as a url. I dont want to use events. I just want to say, "When you open tab 1, load it with the content of this URL." Yes it is easy to such stuff with updateCOntent, but if you wanted to do what I described, you would need to use an event handler for the tab loading.

Do you see the difference? It is certainly POSSIBLE now - I'd just like to see it done easier if that makes sense.
# Posted By Raymond Camden | 12/19/06 8:33 AM
I do understand what you are saying, and I do think it is a good request. I think you can do it now without an event, but the extra code would need to be placed at the end of the page, and why have a few lines of code when you could do it with spry:source="url"? ;-)
# Posted By Joshua Cyr | 12/19/06 9:00 AM
I'm posting this to the forum now.
# Posted By Raymond Camden | 12/19/06 9:04 AM
i want to update a div layer with a page contains a spry dynamic table but it doesn't work. what am i suppose to do ?
# Posted By osman | 4/1/07 6:37 AM
Osman - try posting your question in the Spry forum here:
http://www.adobe.com/cfusion/webforums/forum/categ...
# Posted By Bruce | 4/1/07 6:34 PM
Hi the thing that i have noticed with spry, is that when you press refresh then the page always loads the initial (default) tab, so also in this case, just press refresh and it will always show you the first page instead of what you were reading
# Posted By Mike | 6/16/07 10:30 PM
Hi I have dynamic table that I need to display in one of the tabbed panel. I created a html page implementing the SpryXMLDataset which displays fine individually but doesnt work when i try to insert using the tabbed panel example described by you. Am I missing something?
# Posted By sam | 2/13/08 7:31 PM
Sam - I've not tried to use a dynamic table as one of the content items so I'm not sure how to solve your issue. See my note above about posting questions in the Spry forum on Adobe.
# Posted By Bruce | 2/13/08 7:43 PM
Hello Bruce,

I have a DIV in which a HTML page can be loaded, using Spry. The loading is no problem, but the Spry effects are NOT visible.

It looks like the Javascript (in the HTML page) is ignored when loading.

Can you help me?

With regards,

Rob
# Posted By Rob Poulussen | 3/30/08 3:35 AM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.002. Contact Blog Owner