Update 05/11: version 0.2 of the DHTML Library has a helper function to “serialize” the order of a list:
ToolMan.junkdrawer().serializeList(myList)
It returns a string representation of the list as described in the remainder of this post.
Tim Erfle and several others have asked a question like the following:
Is there anyway to report the order of the list after it has been sorted by the user? Its a super cool script, but it would be helpful if store the user modified order in the database.
Because the sorting is done by rearranging elements in the DOM, all you have to do is iterate over the parent element’s children to extract the new order. For example:
function foo(listID) {
var list = document.getElementById(listID);
var items = list.getElementsByTagName("li");
var itemsString = "";
for (var i = 0; i < items.length; i++) {
if (itemsString.length > 0) itemsString += ":";
itemsString += items[i].innerHTML;
}
alert(itemsString);
}
To use this in a form submit replace alert(itemsString) with something like myHiddenInput.value = itemsString. Or you could stuff itemsString in a cookie or pass it back to the server with XMLHttpRequest. The above example uses items[i].innerHTML which works fine so long as your list items are plain text. A better approach is to give each LI element a unique identifier. You can use the ID attribute or — if you’re not concerned about valid XHTML — invent a new attribute to use. A list would look something like this:
<ul>
<li listID="325"><a href="...">Copper</a></li>
<li listID="27"><a href="...">Gold</a></li>
<li listID="131"><a href="...">Gold</a></li>
...
</ul>
And use a script like this to extract the order:
function foo(listID, formInput) {
var list = document.getElementById(listID);
var items = list.getElementsByTagName("li");
var itemIDs = "";
for (var i = 0; i < items.length; i++) {
if (itemIDs.length > 0) itemIDs += ":";
itemIDs += items[i].getAttribute("listID");
}
// do something with itemIDs
}
146 Comments