Spry Linked Comboboxes

Posted At : November 6, 2007 10:16 PM | Posted By : Gary Gilbert
Related Categories: Coldfusion,Spry

I've been seeing quite a few posts by Ray Camden in the last little while about spry and I decided that I would jump on Rays bandwagon and check out the not-so-new new pre-release version as well.

The first thing I figured I would try since it's so commonly used are linked combo boxes.

If you have played around with CF8 you know how easy it is to set up linked combo boxes, but if you have a client that doesn't have CF8 you have to resort to other measures. Enter Spry.

It's really dead easy to set up data-driven combo-boxes with spry.

Step One

The first thing you need to do of course is download the Spry Framework if you haven't already done so. You can pick it up on Adobe Labs.

Step Two

Add the two required scripts to your html page, both together weigh in at under 100k.

Step Three

Set up your two data sources. Here I just re-used a CFC I created a while back that outputs a json dataset containing the directories on my server, not exactly the smartest thing to do but its only for demo purposes right :).

var dsDirs = new Spry.Data.JSONDataSet("com/gg/fileExplorer.cfc?method=getDirectoriesExt&itempath=&itemvalue=/dev");
var dsSubdir = new Spry.Data.JSONDataSet("com/gg/fileExplorer.cfc?method=getDirectoriesExt&itempath=&itemvalue={dsDirs::id}");

You will notice the curly braces in the second dataset. This sets up a binding to the first dataset and pases the id field in the JSON dataset as the itemValue argument to my cfc.

Step Four

The fourth step is to set up our combo boxes. We first create a spry region for our first data set and then add in a select tag and tell spry to loop over the contents of our dataset using the repeatchildren spry attribute. We also want to make sure that when we select an item in our select box that we set the currentRowNumber in the dataset so that we populate the second box with the right info.

We then use the curly braces in the option tag to bind the value and text to the id and text fields in our JSON dataset.

The second spry region contains our linked combo box, we set it up much like the first except here we don't need to specify an onchange event.

    <form name="selectForm" action="">
    Directory:
<span spry:region="dsDirs" id="dirSelector">
        <select spry:repeatchildren="dsDirs" name="dirSelect" onchange="dsDirs.setCurrentRowNumber(this.selectedIndex);">
            <option value="{id}">{text}</option>
        </select>
</span>
        Subdirectory:
<span spry:region="dsSubdir" id="subdirSelector">
        <select spry:repeatchildren="dsSubdir" name="subdirSelect">
            <option value="{id}">{text}</option>
        </select>
</span>
</form>

Thats it you are done!

I have attached the cfc if you would like to use it.

Happy Coding...