Yes, I should have put that part in too. My <ul> would then look
something like:
<ul id="widgets" class="panel" title="Widgets" selected="true"
beforeload="refreshWidgets();">
</ul>
Then in my own .js file for my app I'd have a refreshWidgets function
that uses XMLHttpRequest to get the content and replace the $
('widgets').innerHTML with the content. Actually, I just have a
generic function for replacing the content of a block element with
page data so all my refresh calls can use the same function and pass a
callback if needed. Just in case that helps you, here's the actual
code I use:
function updateContent( href, content, callback, fade )
{
if ( fade ) {
new Effect.Opacity(
content.id, {duration:0.3, from:1.0, to: 0.0} );
}
var req = new XMLHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
content.innerHTML = req.responseText;
if ( callback != null ) {
callback(content);
}
if ( fade ) {
new Effect.Opacity(
content.id, {duration:0.3, from:0.0,
to: 1.0} );
}
}
};
req.open( "GET", href, true);
req.send(null);
}
That uses the Scriptaculous effects library to fade out and fade in
the new content. It also includes a callback function in case there is
extra work to do before fading then new content in. So my <ul> or
<div> example actually becomes:
<ul id="widgets" class="panel" title="Widgets" selected="true"
beforeload="updateContent('widgetContent.php', $('widgets'),
someCallBack(), true);">
</ul>
Then the widgetContent.php file does all the work of filling in the
details for the page. Hope that clarifies things.
David