I''m fairly new to Prototype, so I need some help here.
In my web app, I have an expanding list of "groups" in the form of
nested <ul>/<li>s. When I click a [+] image next to one item, I
make
an Ajax call to the server which returns a JSON list of "child
groups".
Using Ajax.Updater with "insertion: Insertion.Bottom", I can insert
the raw JSON into my list... but that''s not what I want. I need to
run my raw JSON through another method that generates a <ul> list, and
THEN insert the resulting HTML into my parent list.
Can anyone help me out here??
Here is the code for my custom list expander object, and the list
builder method I would like to use:
var groupListItemExpander = Class.create
({
childsLoaded: false,
initialize: function( element )
{
this.element = $( element );
this.groupId = this.element.up( ''li'' ).down(
''input'' ).value;
this.initEventHandlers();
}, // initialize
initEventHandlers: function()
{
this.eventHandlerRefClick = this.eventHandlerClick.bind( this );
this.element.observe( ''click'', this.eventHandlerClick );
}, // initEventHandlers
eventHandlerClick: function( e )
{
var element = e.element();
var parent = element.up( ''li'' );
var list = element.up( ''li'' ).down(
''ul'' );
var groupId = element.up( ''li'' ).down(
''input'' ).value;
var url = system.template.webRoot +
''/group/child/id/'' +
groupId;
new Ajax.Updater( parent, url,
{
method:''get'',
insertion: Insertion.Bottom,
}
});
e.stop();
}, // eventHandlerClick
buildList: function( items )
{
items = $A( items );
var list = ''<ul>'';
items.each(
function( group )
{
list +=
''<li><table><tbody><tr><td><img
src="'' +
system.template.root + ''/_img/listCollapsed.gif"
class="expander"
title="'' + group.title + ''"
/></td>''
+ ''<td><input id="group-'' + group.id +
''" name="group-'' +
group.id + ''" type="checkbox" value="'' +
group.id + ''" /></td>''
+ ''<td><img src="'' +
system.template.webRoot + ''/img/icons/16/''
+ group.iconTitle + ''.png" class="groupListIcon"
title="'' +
group.title + ''" /></td>''
+ ''<td><a href="'' +
system.template.webRoot + ''/group/id/'' +
group.id + ''" title="'' + group.title +
''">'' + group.title + ''</a></
td></tr></tbody></table></li>'';
});
list += ''</ul>'';
this.element.up( ''ul'' ).insert( list );
} // buildList
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---