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

Adobe’s samples didn’t seem to cover this scenario so it became a matter of trial and error, and a lot of wading through documentation. In the end, however, it turned out to be a matter of changing only a few lines of code.

First, let’s revisit my previous select code:

{brandNAME}
{brandNAME}

The portion we need to look at in particular is in red. ds_RowNumber reflects the position of the row currently being evaluated. ds_CurrentRowNumber is the row number of the “current row” of the data set. This works if I don’t need a specific value to be selected, but it does absolutely nothing for me if I want the saved value to be selected in the list when editing.

What I need is a way to check whether a brandID in the dsBrands dataset is equal to the brand ID of the record I’m editing. So, the first thing I need to know is how to refer to the value of the dataset’s current brand_id. This is done by enclosing the column name in single quotes, like this: ‘{brandID}’.

Now I can compare that value to the brand ID of the record I’m editing. For example, if the query object of the current record that I’m editing is named qEditProduct and the column that holds the brand id in qEditProduct is called brand_id, I would refer to it like this: #qEditProduct.brand_id# .

Compare one to the other and I have my new SELECT definition:

{brandNAME}
{brandNAME}

Now, if the value of brand ID in my select matches the value of the brand ID in the record I’m editing it will be pre-selected in the list.

To take this a step further, my original example was on multi-related selects, meaning I had subbrand select that was related to the value in the brand select. That being the case, I first have to make the same change to the subbrand select definition resulting in the following code:

{subbrandNAME}
{subbrandNAME}

Then, I also need to modify my dataset definition. Initially, dsSubbrands definition was based on the value of the brand select. The subbrands changed when the brand changed. If we’re editing, however, we want our subbrand to depend on the value stored in the current record rather than being related to the brand select. My original dsSubbrands dataset definition looked like this:

var dsSubbrands = new Spry.Data.XMLDataSet("subbrands.cfm?brandID={dsBrands::brandID}","subbrands/subbrand");

{dsBrands::brandID} is my reference to the selected item in the brands select. I need to change that so it now refers to the current record in my qEditProduct query:

var dsSubbrands = new Spry.Data.XMLDataSet("subbrands.cfm?brandID=#qEditProduct.brand_id#","subbrands/subbrand");

Now when I edit a record, the record values will be pre-selected in both the brand and subbrand dropdown. You can use the original code for ‘add record’ forms or, for more condensed code, combine them both into a conditional check based on whether the user is adding or editing a record.

-rG

It actually ended up being quite easy.

The original code for defining the Spry datasets looked like this:

Once the subbrands for a particular brand were read in, however, they would no longer updated. To force an update I just had to add a little code and a function to the subbrands definition:

var dsSubbrands = new Spry.Data.XMLDataSet("xmlSubbrands.cfm?brand_id={dsBrands::brand_id}",
"subbrands/subbrand",{useCache:false});
function refreshSubbrands()  {dsSubbrands.url="xmlSubbrands.cfm?brand_id={dsBrands::brand_id}&cachebuster=#Now()#";
dsSubbrands.loadData();}

The first thing I do is disable the cache. Then I define a function that will redefine and reload the dsSubbrands dataset. I added in the date and time to the URL to further prevent XML caching. That’s all the code required to update the select list.

The only thing left to do from here is to get the popup to execute the function. This is accomplished by adding the following code after the insert is completed:

window.opener is a reference to the window that opened the current window. The reason I check whether the referencing page exists is so that the add subbrand form can also be used as a normal page outside of the form that calls it as a popup. refreshSubbrands is the function I created to reload the subbrands select. In this way, the select list is updated as soon as the update is completed. No refresh is necessary, even if the parent brand is already selected.

Credit Where Credit Is Due
I found the guts of this technique on Andrew Powell’s ColdFusion, Mach-II, Flex, and Spry Blog where he has a great example demonstrating how to page through a set of data in 10 record increments.

-rG

The first thing I noticed was that, still being in development, there isn’t much Spry documentation. In lieu of docs Adobe provides several samples which, though useful, did not provide the solution I was looking for. My goal is to have two select boxes, each populated by separate but related datasets. In the example I use below, my datasets are brands and subbrands. The subbrands dataset contains a brandID column which is related to the brandID column in the brands dataset. Read on to see how I did it and feel free to leave a comment telling me how I should have done it .

First, I set up my two datasets in a component named datasets.cfc.:

   
		
		
		
		
		
		
		
		
		
		

      

   

     
	 	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		
			select *
			from tbl
			where brandID = #arguments.brandID#
		

      

   

Next, I created two ColdFusion pages, brands.cfm and subbrands.cfm, that output XML. These will be used as the sources for my selects. The brands.cfm page will output all brands. The subbrands.cfm will expect a URL variable named brandID and will output only the subbrands with that brand ID.

A small diversion: One reason I used external pages to output my XML was that it allowed me to easily insert a new row at the beginning of the dataset. I wanted an additional option with a value of 0 which gets submitted if no brand is selected, In the select box this value is represented by the text: ‘Please select a brand’.

Here are the pages that output XML:

brands.cfm

	
		0
		Select a brand
	
	
	
		#xmlFormat(brandID)#
		#xmlFormat(brand)#
	
	





#thisXML#

subbrands.cfm

	
		
			0
			No subbrands available
		
	
		
			0
			Select a subbrand
		
	
	
	
		#xmlFormat(subbrand_id)#
		#xmlFormat(subbrand_name)#
	
	






#thisXML#

Now the meat of the main page which holds the selects. The first thing I do is load the Spry js files:

Next, I define my XML datasets by pointing the js variables to the appropriate XML-generating pages. Notice that my dsSubbrands dataset passes the current value of brandID to the subbrands page. The second parameter in the method calls (“brands/brand” and “subbrands/subbrand”) refer to the XML node names leading to the records.

And finally, I place the selects by providing repeatingchildren with my dataset names and using the brace format to provide the column names within the source xml ({brandID}, {brandNAME} and {subbrandNAME}):

Brand:


{brandNAME}
{brandNAME}



		


Subbrand:


{subbrandNAME}
{subbrandNAME}



		

…and Spry takes care of the rest.

As I said before, this is a workable solution but I’m certain there are quicker and more efficient ways to get the same results with Spry without the XML hoops that I jumped through here. You can see a working copy here.

In researching, I attempted using Ray Camden’s toXML component as well as the WDDX functionality provided by ColdFusion but I just kept running problems passing the resulting datasets to the Spry methods.

Let me know if anyone out there has done anything similar using Spry. I’m interested in seeing the different possible solutions because it seems to me there are many.

-rG