Spry: Empty option in dataset-controlled select
With Adobe Spry, you can dynamically populate a select box (aka. dropdown) with a dataset very easily:
var ds = new Spry.Data.JSONDataSet("/some/jsonobject.js");
</script>
<div spry:region="ds">
<select spry:repeatchildren="ds">
<option value="{ds::id}">{ds::name}</option>
</select>
</div>
If you are familiar with Spry, than the above makes complete sense. I came across a problem this evening, however, when using very similar code as a filter mechanism for a separate dataset. The problem with the above code is that once it is populated, the select box will by default choose the first value as selected. If you are filtering data, you want the initial/reset state to be blank and not have any values.
Since I am using spry:repeatchildren to repeat my option tags, I cannot simply drop in a blank option tag above the current one because than it would also repeat for all the other rows in the dataset.
Thanks to the built in variables for each dataset, we can get special information during the loop of the dataset rows. This is valuable information since we technically need to drop the blank option just above the first row of the dataset.
We modify the above code to be the following instead:
var ds = new Spry.Data.JSONDataSet("/some/jsonobject.js");
</script>
<div spry:region="ds">
<select spry:repeatchildren="ds">
<option value="" spry:if="{ds_RowNumber}==0"></option>
<option value="{ds::id}">{ds::name}</option>
</select>
</div>
The spry:if simply checks if the loop is on row number 0 and if it is, it will drop in that option tag. Otherwise, it gets left out on all of the other rows.
p.s. On your Add Comment form, the labels by the checkboxes are blank. OOps not blank - but lined up below them. I assumed there were blank at first. I can send a screen shot if you want.
Yours makes much more sense so that I don't have to run an if statement on every loop.