Spry Master - Detail Data Sets
In this example of using the Adobe Spry ajax framework, we will add to our previous example the ability for the user to select a city from a drop down select box and then update the table with the information for that city. This technique is known as a master (city) - detail (city's information) relationship. Spry makes creating master-detail dynamic regions easy.
Our first step is to create an XML file that contains the cities we want to use in our select element (cities.xml). Then we need to create another XMLDataSet object (dsCities) in our web page and link the detail data set (dsCityInfo) to the master data set (dsCities).
Here is the code:
<InvalidTag type="text/javascript">
var dsCities = new Spry.Data.XMLDataSet("cities.xml", "dataset/row"); //master data set
var dsCityInfo = new Spry.Data.XMLDataSet("../datasetexample/getInfo.cfc?method=getInfoByCity&city;={dsCities::city}", "NewDataSet/Table"); //child data set linked to the city selected in the dsCities data set
</script>
Notice that instead of hard-coding the value for city in our call to getInfo.cfc, I'm now using {dsCities::city}. This is Spry's syntax for getting the city value for the current selected row in the dsCities data set. So whatever row the users selects in the dsCities data set, that row's city value will be used in the call to getInfo.cfc. If the user changes the selected row, the dsCityInfo will be recreated using the new city value for that row.
Our next step is to build the master region, which in this example is just a select element. We want this select element populated using our master data set (dsCities). Here is that code:
<!--create select drop down that uses the master data set-->
<div id="citiesDIV" spry:region="dsCities" class="docBlock" >
<p>City:
<!--use the onchange event to tell Spry which row of data was selected in the drop down.
When the user selects an option, Spry will update the detail data set (dsCityInfo) with by
recreating the detail data set using the city the user selected-->
<select id="citiesSelect" onchange="dsCities.setCurrentRow(this.selectedIndex);">
<!--create an option with each row in the dsCities data set-->
<option spry:repeat="dsCities" id="{city}">{city}</option>
</select>
</p>
</div>
I use the onchange event, which is triggered when the user selects a different city in the select box. Spry sets the current row of the data set dsCities to the user's selection. Updating the current row of the dsCities data set causes Spry to recreate the dsCityInfo data set by sending the city value to the getInfo.cfc and getting the information for that city.
The last step is to use the same spry:region we created in our previous example. This region uses the dsCityInfo to display each row of data as a row in a table element. The dsCityInfo will be recreated and the table redrawn each time the user selects a city in the select drop down.
There are some good examples of other techniques you can use with Spry's data sets here: http://labs.adobe.com/technologies/spry/samples/
I am not able to accomplish the same using JSONDataSet. Can you please validate if this works for JSONDataSet. While debugging using Firebug I noticed that the value of
dynamic variable is not passed to get the data.