Asynchronous loading in HTML View

Asynchronous loading in HTML View

Does anyone have any suggestions on how to "emulate" asynchronous loading of information in a view?

I have created many css accordian boxes right in a comment field on a form. (works great by the way for data you don't want edited and want to take up less room). Just hide the fields you don't want people to edit.

Example of box here....

Code Example:


// style for statbox
stat_stylevar = "<head><style type='text/css'>.holder {width:260px; margin:0px; padding-left:1em; padding-top:0em; padding-bottom:0em; border:1px solid #ddd; float:none;}.holder h2 {text-align:left;}a.hid {color:#000;text-decoration:none;outline-style:none;}a.hid em {display:none;}a.hid:hover {text-decoration:none;}a.hid:active, a.hid:focus {background:#fff;}a.hid:active span, a.hid:focus span{display:none;}a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}.clear {clear:both;}</style></head>";
//CPO box
stat_var1 = "<body><div id='info'><div class='holder'><p><a class='hid' href='#more' onclick='this.hideFocus=true' onblur='this.hideFocus=false'><span>CPO »</span><em><b>Avg. Order</b>...." + input.avg_order + "<br/><b>Month</b>..." + input.month_cpo + "<br/><b>Campaign</b>..." + input.campaign_cpo + "<br/><b>Year</b>..." + input.year_cpo + "<br/><em></a></p></div>";
//Promotion Box
stat_var2 = "<div class='holder'><p><a class='hid' href='#more' onclick='this.hideFocus=true' onblur='this.hideFocus=false'><span>Promote!»</span><em>" + input.cpo_to_promotion + " " + "to" + " " + input.next_promotion + "<br/><br/>" + statprint + statprint2 + statprint3 + "</em></a></p></div>";
//Schedule box
stat_var3 = "<div class='holder'><p><a class='hid' href='#more' onclick='this.hideFocus=true' onblur='this.hideFocus=false'><span>Schedule»</span><em><b>Tues:</b>" + tues_var + "<br/><b>Wed:</b>" + wed_var + "<br/><b>Thurs:</b>" + thurs_var + "<br/><b>Fri:</b>" + fri_var + "<br/><b>Sat:</b>" + sat_var + "<br/><b>Sun:</b>" + sun_var + "<br/><b>Mon:</b>" + mon_var + "<br/></em></a></p></div>";
//end of box
box_end = ("<br class='clear' /></div> <!-- end of info --></body>");
//for twitter
if (input.twitter_id1  !=  "")
{
    mapvar = getUrl("http://twitter.com/users/show/" + input.twitter_id1 + ".xml",false);
    stringdata = mapvar.get("responseText");
    xmldata = stringdata.toXML();
    strdata = xmldata.executeXPath("/user");
    xmllist = strdata.toXmlList();
    for each x in xmllist
    {
        input.twitter_location = xmldata.executeXPath("/user/location/text()");
        input.twitter_update = xmldata.executeXPath("/user/status/text/text()");
    }
    location_print = "<b>Location:</b> " + input.twitter_location + "<br/>";
    status_text = (((((("<b>Last Update:</b><br/><font size='10'>") + "“") + "</font>") + input.twitter_update) + "<font size='10'>") + "”") + "</font>";
    twitter_box = "<div class='holder'><p><a class='hid' href='#more' onclick='this.hideFocus=true' onblur='this.hideFocus=false'><span>Twitter»</span><em>" + location_print + status_text + "</em></a></p></div>";
    input.stat_box = stat_stylevar + stat_var1 + stat_var2 + stat_var3 + twitter_box + box_end;
}
else
{
    input.stat_box = stat_stylevar + stat_var1 + stat_var2 + stat_var3 + box_end;
}


































 
HOWEVER, I don't want to use this type of accordian system on the HTML view. I want to create sort of a "Reader Pane" like in Outlook, Yahoo mail, and other systems.

I can create dynamic views that pop up information in my sleep. What I really want is a view to transform WITHOUT the costly load times of refreshing the whole page.

Does anyone have any thoughts?