iui initial menu refresh

Showing 1-6 of 6 messages
iui initial menu refresh scott....@gmail.com 8/5/08 5:55 AM
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?


Re: iui initial menu refresh David Ethell 8/7/08 12:47 PM
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") ) {

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

            if ( toPage.getAttribute("onload") ) {

Re: iui initial menu refresh David Scott 8/7/08 2:14 PM

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

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?


David Scott

Re: iui initial menu refresh David Ethell 8/8/08 2:20 AM
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"

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 ) {
            if ( fade ) {
                    new Effect.Opacity(content.id, {duration:0.3, from:0.0,
to: 1.0} );

        req.open( "GET", href, true);

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);">

Then the widgetContent.php file does all the work of filling in the
details for the page. Hope that clarifies things.

Re: iui initial menu refresh David Scott 9/4/08 8:53 AM
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

Re: iui initial menu refresh Chrilith 9/5/08 1:33 AM
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.