Thursday, November 29, 2007

Prototype/Javascript rules

I was doing some work with the new prototype this week to display some tables that represent a part of the file system. Since each one of them was a folder and could have numerous files I needed each one to collapse, but I wanted to keep all the info in the same table so divs where out.
This isn't ground breaking, but it shows the power of the prototype.js 1.6. This code closed each row after the header row and I didn't need to provide unique id's for each row on each table! All I did as you'll see below is pass the link that was toggling the collapse and expansion.

function _toggle(a) {
a = $(a);
var trs = a.up('tbody').childElements();
trs.without(trs.first()).invoke('toggle');
a.update(a.innerHTML == "-"?"+":"-");
return false;
}
Event.observe(window, 'load', function() {
$$('a[rel="toggle"]').each(function(a) { _toggle(a);});
});

The table would be rendered something like this. You can see the toggling link. I added a "rel" attribute to be able to identify and collapse all the tables when the page loaded.

<table>
<tbody>
<tr>
<td class="name" colspan="2">
<div><a href="#" onclick="_toggle(this); return false;" rel="toggle">-</a></div>Template Something
</td>
</tr>
</tbody>
</table>

So little code that does so much. But it really isn't that much. It's just that doing this the old way required you to put in so much code with id parsing to get it done. So really it's just the right about of code for the perceived work. I like it!

No comments: