Errors updating table contents with Prototype

Question

I want to do something like this in Prototype:

onSuccess: function(transport) {
    template = transport.responseText.evalJSON();
    form = event.up('form');
    form.select('.audio_channels').update(template.channelHtml);
}

The form tag is a table, and I want to replace its contents. channelHtml is a string of HTML <tr> tags.

I'm getting:

TypeError: Object [object HTMLTableElement] has no method 'update'

So I figure it's not an extended object and tried Element.extend(form.select('audio_channels')), which returns an empty object. Then I try form.select('.audio_channels').innerHTML(template.channelHtml) and I get TypeError: Object [object HTMLTableElement] has no method 'innerHTML'. Then I try with the tbody element and I get [object HTMLTableSectionElement] has no method 'innerHtml'

This seems to me like it should work. form.select('audio_channels') is returning the correct DOM element. What do I need to do to set the content of the table based on my ajax call?

Answer 1

Replace the last line with

form.select('.audio_channels').each(function(node){
  node.update(template.channelHtml);
});

That will execute the code on the actual element instead of a one-item array as the original code was doing.