I made a video player recently containing a list of videos. My client requested the ability to put them in a custom order. It didn’t take much research to find the functionality in the Script.aculo.us library. The question was, how do I implement it with ColdFusion?
I knew I would need AJAX functionality and, up to this point, I had always used Rob Gonda’s AjaxCFC. With the release of ColdFusion 8, however, Adobe introduced CFAjaxProxy. I’d been looking for an opportunity to give it a try and this turned out to be a perfect fit.
My next stop was a post by Mohammed Irfaan over at the Lynch Consulting Blog which discusses a technique for using ColdFusion to update an underlying table after using Script.aculo.us’s Drag and Drop functionality.
Here’s how I put it all together:
First, I created a table named videocenter to hold my video records. It looks something like this:
video_uuid – Unique identifier for each video record
video_title – Title for the video record
sort_order – Integer reflecting the order in which the video should be displayed.
Next, I wrote my sortvideos CFC which will loop through the list of videos that my page will send to it, and update the sort_order column to reflect the order in which the video are currently displayed on the screen (more about that later):
UPDATE videocenter SET sort_order = WHERE video_uuid =
When called, orderedNodes will become an array of the LI elements within the "sortable_list" UL element defined below. The elements in the array will be in the order in which the list appears on the page. This is the list that gets sent to the updateVideoSort method within my sortvideos CFC above.
Next, I loop through my video records and display the videos in an unordered list. I add an ID to the UL named "sortable_list" and I add a custom attribute to each LI element (recordid) containing video_uuid from my videos table. After that, I place a submit button that will call my resort() function when clicked.
Now I have a list of videos from my videocenter table which can be ordered using drag and drop functionality a la Netflix.