Experimenting with Multi-related Selects using Spry

I recently found myself in need of a multi-related select solution and decided to give Adobe’s new Spry framework a shot.

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:
Subbrand:

…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

12 thoughts on “Experimenting with Multi-related Selects using Spry

  1. Exactly the problem I’ve ran into. I got a project with an ajax’d multi-select box that works fine for new entries, but I can’t get it to load up the current vals for editing an existing record.

    You ever find a solution that fit your need?

  2. @amccollough
    Unfortunately I eventually got frustrated with Spry and kicked it to the curb. It just ended up being too much of a hassle for what I was doing. I found Rob Gonda’s AjaxCFC to be a much better solution for most of the work I was using Spry for.

  3. I’ve got the same problem. I’ve got a spry select box. After the form is submitted, I would like the same selected value to remain selected. Has anyone found a solution?

    Thanks.

    1. IE’s not the market chief at this site 🙂 . Looks like a general cross-browser problem though. Thanks for letting me know.

Comments are closed.