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

On Aug 8, 2008, at 4:20 AM, David Ethell wrote:

>
> 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
>
> On Aug 7, 5:14 pm, David Scott <[EMAIL PROTECTED]> wrote:
>> 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
>>
>> On Aug 7, 2008, at 2:47 PM, David Ethell wrote:
>>
>>
>>
>>> 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
>>
>>> On Aug 5, 8:55 am, [EMAIL PROTECTED] wrote:
>>>> 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
>
> >


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to