Setting a Select Control from a spry dataset.
I have been playing with Adobe's Spry AJAX framework and am most impressed by the Spry Dataset. It really gives Spry a big plus over some of the other frameworks since it makes handling data from databases much easier.
One thing that I needed was missing, an easy way to set a select control based on the dataset. It wan't however very difficult to do that when I tried. To save you wading though the docs to find it here is how I managed it.
A Spry dataset is very much like a ColdFusion dataset. The big difference is that it is on the client and can be updated using Asynchronous calls to the server so it updates without the user hitting enter and refreshing the page.
To use one you First you first have to add the spry libraries to your page. For the example I will be using an XML feed of the data but the same code, with minor modifications, should also work with JSON or HTML feeds too.
<script src="../Scaffolder/SpryAssets/SpryData.js" type="text/javascript"></script>
Now you can populate the dataset with some XML. (I am populating the URL of the XML dataset from ColdFusion hence the # signs around variables.)
<!--
var dsTables = new Spry.Data.XMLDataSet("#configFileURL#", "scaffolding/objects/object",{sortOnLoad:"@name",sortOrderOnLoad:"ascending",useCache:false});
// End Hiding-->
</script>
Then display it on the page inside a spry region.
<table style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small">
<tr spry:repeat="dsTables">
<td><input type="checkbox" name="scaffolding.lTables" checked="checked" value="{@name}" onClick="setAll(this.form);checkGenerate();" onKeyPress="setAll(this.form);checkGenerate();"> {@name}</td>
</tr>
</table>
</div>
Thats all very simple but what about a select control?
Well you can use Javascript to access the dataset and hence you need a function to get triggered when the code is updated. Here is an example for a dataset called dsConfig.
configObserver.onDataChanged = function(dataset, data){
// get the data from the dataset.
var datasource = dataset.getData()[0]["@datasource"];
// update the select drop down with the datasource
var selDatasource = document.getElementById("datasource");
for (var i=1;i < selDatasource.options.length; i++){
if(selDatasource.options[i].value == datasource){
selDatasource.selectedIndex = i;
}
};
return;
}
dsConfig.addObserver(configObserver);
In the example we begin by creating a new observer object. You can also create observer functions which seem in the documentation to be the right thing but they are more difficult to use since they observe all changes and you have check what type of change has triggered it. Objects are specific so we only observe the point when the dataset is ready.
Then we put a fuction into the object. In this case the function will get the value from the dataset and loop through the options to find the one that matches. The we set the selectedIndex.
Quite simple really isn't it?
There are no comments for this entry.
[Add Comment]