iui initial menu refresh

65 views
Skip to first unread message

scott....@gmail.com

unread,
Aug 5, 2008, 8:55:59 AM8/5/08
to iPhoneWebDev
I have an iPhone web app I'm developing where the initial screen/menu
has dynamic content. When it initially loads, the content in the <ul>
list loads fine, but when I navigate to a lower level and come back,
the dynamic content doesn't refresh, because it would take a page load
to refresh that portion of the page (since it's not being refreshed in
the same way the lower level page calls are).

Has anyone addressed this somehow? Can I "trick" the initial page into
refreshing, or somehow reload a portion with my menu?

Thanks,

David

David Ethell

unread,
Aug 7, 2008, 3:47:06 PM8/7/08
to iPhoneWebDev
The way we handled this was to add a couple events to the page loading
mechanism called onload and beforeload. I use those events to refresh
the contents when the page is brought into view.

Then my <ul> contents were basically empty and instead the onload or
beforeload event (depending on where in the sequence I need the data
to refresh) called out to another page that grabbed the actual ul
content and inserted it.

So the first time visiting a page it still calls the refresh function.
In our implementation, beforeload refreshes the data after the new
page is loaded via AJAX but before the page slides into view. The
onload event is called after the page slides into view so in that
instance the user actually sees the refresh occurring.

I don't have a patch against iui.js, but here's the basic code:

For beforeload add this just in front of the slide() call:

// Check for beforeload event
if ( toPage.getAttribute("beforeload") ) {
eval(toPage.getAttribute("beforeload"));
}

For onload add this inside the slide() function. We added it at the
end of the if (percent <=0 ) statement:

if ( toPage.getAttribute("onload") ) {
eval(toPage.getAttribute("onload"));
}

David

David Scott

unread,
Aug 7, 2008, 5:14:58 PM8/7/08
to iphone...@googlegroups.com
David,

Thanks a bunch for heading me in the right direction. To clarify,
though:

The "beforeload"/"onload" attributes - are these attributes you've
added to your "<UL>"? And, if so, do their values contain the name of
a javascript function call of an Ajax routine?

Thanks,

David Scott

David Ethell

unread,
Aug 8, 2008, 5:20:46 AM8/8/08
to iPhoneWebDev
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

David Scott

unread,
Sep 4, 2008, 11:53:41 AM9/4/08
to iphone...@googlegroups.com
I have a follow-up item on this, wondering if anyone has a solution:

First of all, the method for refreshing initial content that David
Ethell sent, below, is a great addition.

However - something I've noticed is that when the content rolls back
into place, the stylesheet is not applied. It is one, ugly bulleted
mess. I can't seem to get the style to apply to the UL content once it
rolls back. I can reload the page, but - well - that's even uglier.

Any ideas?

David Scott

Chrilith

unread,
Sep 5, 2008, 4:33:07 AM9/5/08
to iPhoneWebDev
Don't know the status of your webapp but using WebApp.Net
you'll be able to use slide events and refresh your layers as you want
without too much headache.
Reply all
Reply to author
Forward
0 new messages