Thanks to Firebug, I was able to track down the issue pretty quickly. The cfajax.js and cfmessage.js libraries were failing to load. These files are located in subfolders under the CFIDE folder.

For those unfamiliar with the CFIDE folder, it contains central and core coldfusion files, custom tags, libraries and the ColdFusion administrator. The reason I wasn’t having the problem locally was because I wasn’t in a shared hosting environment so CFIDE was right where ColdFusion expected it to be.

In a shared hosting environment, however, ColdFusion looks for CFIDE in the root of the current domain. So, rather than looking in the web server root, it looks in the domain root. For example, if the site I’m working on is mysite.com, ColdFusion will look for CIDE in http://www.mysite.com/CFIDE/.

While I could make a virtual directory mapping to the existing CFIDE folder, I didn’t want to expose the ColdFusion Administrator. Instead, I created a new CFIDE folder and copied only the SCRIPTS subfolder into it. I then created a CFIDE virtual directory within the domain which pointed to the new CFIDE folder.

I know many developers have experienced a similar issue with CFFORM, however, that issue can be surmounted with the use of the scriptsrc parameter which isn’t available for CFAjaxProxy.

Admittedly, this solution feels a bit lame, but I’m unaware of any other way around it. If you know of a better way, please leave a comment!

-rG

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.

Jake Munson of Yacoblog posted a great introduction to using CFAjaxProxy. Simple and straight to the point. I had it working in no time.

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 = 
	   
	
	

After downloading and installing the Script.aculo.us JavaScript library, I began to build my page.

I started off by defining the Ajax proxy. This line defines my ColdFusion component (sortvideos) and the JavaScript proxy class that represents the CFC (respond):

I then included the necessary Script.aculo.us files and the JavaScript function that will call the Ajax method within my ColdFusion component. Note that you may have to alter the path to the JavaScript files depending on where yours are stored:

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.

#video_title#

Finally, a last bit of required JavaScript to make the Script.aculo.us magic happen. Note that "sortable_list" is the id I gave to my UL element above.

Now I have a list of videos from my videocenter table which can be ordered using drag and drop functionality a la Netflix.

-rG