Archive for September, 2009

Scriptaculous Sortable: onUpdate and onChange events

Today I was working with some nexted Sortable lists using the Sortable class from Scriptaculous.  My list looked something like this.

HTML:
  1. <ul id="list">
  2.     <li id="item_EA13CC21-D86C-4A8D-84A6-016262DBA72E">Room 1</li>
  3.     <li id="item_291BF49D-9FBA-446B-8C32-0E43C0879830">Room 2</li>
  4.     <li id="item_0F8BF7B5-9AF7-4DE0-885C-17BE57126444">Room 3</li>
  5.     <li id="item_0F72290C-FC72-4887-91FF-21E1D460B6FA">Room 4</li>
  6. </ul>

For some reason the onUpdate event did not seem to fire. I found a post here mentioning that not only do the list items have to each have unique ID's, which mine clearly do, but they must also following a naming scheme something like [name]_[id] which mine seems to follow as well. Upon further investigation, it turns out that it needs be formatted with an [name]_[integer]. I assume this is required in order for the class to offer the sequence method.

Clearing options AND optgroups in a select

Until today, I always cleared options from a select by doing something like this:

JavaScript:
  1. //Clear select of exiting options
  2. element.options.length = 0;

A quick Google search turned up this blog post where they had this helpful snippet:

JavaScript:
  1. //Clear select of exiting options and optgroups
  2. while (element.hasChildNodes()) {
  3.      element.removeChild(element.firstChild);
  4. }

This clears all items in the select and there is no noticeable performance loss when dealing with a select with a reasonable number of options.