NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.

Sorting a Nested List Using jQuery And Saving the Changes

Posted At : January 27, 2008 4:56 PM | Posted By : Brian
Related Categories: Web development, jQuery, JavaScript, Downloads
A screenshot of the sorting demoA 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.

[More]

Comments (9) | Print | Download | del.icio.us | Linking Blogs

UI Tool: Rearranging Items in a List, jQuery-style!

Posted At : November 11, 2007 10:47 AM | Posted By : Brian
Related Categories: jQuery, JavaScript, Downloads, CSS
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 or via the link in my Downloads list on the right:

List Sort Control (with jQuery)

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

Comments (2) | Print | del.icio.us | Linking Blogs

UI Tool for Rearraging Items in a List

Posted At : March 21, 2007 8:26 AM | Posted By : Brian
Related Categories: Web development, JavaScript, Downloads, ColdFusion
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 either by clicking on the List Reorder Tool link in my Downloads box on the right, or by clicking on the link below:

List Reorder Tool

Comments (9) | Print | del.icio.us | Linking Blogs

Presenting a User Interface Tool for Adding Members to a Set

Posted At : January 1, 2007 3:28 PM | Posted By : Brian
Related Categories: JavaScript, Downloads, ColdFusion
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 Member/Set Tool link in the Downloads box to the right.

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. :)

Print | del.icio.us | Linking Blogs
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.