Thought Delimited

A reader asked me if it was possible to sort/rearrange items in nested lists (lists within a main list) using the jQuery UI Sortables code. I told him that it was, and I had actually created a tool for a client recently that made use of that feature.

He wanted to know more about how to do it, so I went ahead and created a downloadable working demo of how to do it.You can view an on-line version of the demo (and get the downloadable zip file) here:

Nested List Sort Demo

The drag-and-drop action that lets you move the items around is the easiest part, as that's simply the Sortables code doing its work. Most of the work involved the code that generates the list for display (written in ColdFusion but do-able in other languages) and the JavaScript code that leverages the core jQuery selectors to scan the list and create a string of data that represents the structure and order of entire list. Both sets of code use a recursive function anytime a nested list is encountered, making it possible to have an unlimited number of nested lists within the main list or any other nested list.

The hierarchy structure is tracked/described through the use of parent ids. Each item in the list has a database record that includes the unique record id of its parent (with items in the main list having a parent id of 0). The JavaScript code records the id of the parent DOM element for each item as it scans the list, and that information becomes part of the string that is submitted via the form. The order of the items is simply the byproduct of the JavaScript code traversing down the list.

Like the tool I wrote for rearranging items in a single list, this is simply another means of letting users rearrange the display of records when the order of display can be arbitrary or a matter of preference rather than a strict alphanumeric sort.

A few weeks ago, as part of an application prototype for a client, I used the fairly new jQuery UI library to create a UI tool where a user could rearrange a list of items by dragging and dropping them into different positions and then save those changes to the database.

I now have a public example posted and available for download--check it out using the link below:

List Sort Control (with jQuery)

It works in FireFox, IE, and Opera, and can be used in conjunction with any web application programming language.

Almost all database-driven web sites have one or more web pages that display a set of related records. Most of the time, those pages automatically list the records in a particular order (alphabetically, numerically, chronologically, etc.).

There are occasions, however, when administrative users want to be able to manually rearrange the order in which records or items will be displayed. For example, a news or PR site may want to change the order in which articles are displayed on the main page so that the most important or "hottest" items are at the top. Or a web-based testing site may want to rearrange the order of the questions on a test.

How do you grant such a request?

Well, for starters, you need to add a sorting or order field to the relevant records, something that the users can change the value of without affecting any of the "real" data in the record. That's fairly easy to do.

The hard part is figuring out how to let your users manipulate those order numbers, because it's not sufficient to simple let them change each order number one at a time: what if two records end up with the same order/sorting number (like 5, for example)? Which record comes first?

You need a way for the users to change the order of an item in relation to the items around it. After having faced this situation several times, I developed a user-interface tool that allows a user to rearrange the items in a list quickly and easily using JavaScript: my List Reorder tool.

I'm making two versions of this tool available for download: a ColdFusion-powered version with ColdFusion code and functions for rendering the item/record list from the database, and an HTML version that developers can utilize with other server-side languages (PHP, Java, etc.).

You can read more about the tool and download it by clicking on the link below:

List Reorder Tool

Happy New Year!

One of the reasons I started this blog was to have a place where I could share some of the tools I've developed for my various web applications. Despite a hectic holiday season and sporadic bursts of sheer laziness, I managed to put the finishing touches on one of these tools, and it's now ready to share.

My Member/Set Tool is a user interface tool that lets you add member items to a set or group in any order you wish. To read about the tool, simply click on the following link:

Member/Set Tool

If you like the tool and would like me to polish some other similar tools I've developed and make them available, please leave a comment to that effect so I know there's some interest: it'll help motivate me. :)