Unlike a normal <select> element, when you insert a Spry select list into a page, Dreamweaver doesn’t prompt you to insert <form>tags at the same time. This is because you can use Spry to respond to changes in the selected option without the need to submit a form. All that’s necessary is to add an onchangeevent handler to the select list. This dis- patches details of the selected item to other Spry elements, updating the page in the same way as clicking a row in a Spry table. I’ll explain how it works in more detail when you add the onchangeevent handler. But first, let’s insert the Spry select list.
These instructions show you how to add a Spry select list to gallery_select.phpto dis- play the details of the available photo galleries. It draws its data from the dsGalleries data set that you created in the preceding exercise. Continue working with the same page as before. Alternatively, use gallery_select_02.phpin examples/ch19.
1.In Design view, select the spryTable <div>, and press your left arrow key to move the insertion point to the top of the page. If you check in Split view, the insertion point should be between the opening <body>tag and the opening tag of the <div>.
2.Click the Spry Regionbutton on the Insertbar, or select Insert➤Spry➤Spry Region. 3.In the Insert Spry Regiondialog box, use the following settings, and then click OK:
Container:DIV Type:Region
Spry Data Set:dsGalleries
This creates a Spry region and primes it to use the correct data set for the select list.
4.The <div>created by the Insert Spry Regiondialog box contains placeholder text.
Leave this selected, and insert the Spry select list by clicking the Spry Repeat List button on the Spry tab of the Insertbar or by selecting Insert ➤ Spry ➤ Spry Repeat List.
5.In the Insert Spry Repeat Listdialog box, use the following settings, and then click OK: Inserting a Spry select list to display the photo galleries
This draws the data from the dsGalleriesdata set and uses the labelcolumn to determine the text shown by each option and the source column to set the option’s valueattribute.
6.The placeholder text should have been replaced by a select menu element. Change the name of the menu element in the Property inspector from the default value, select, to selectGallery.
7.Let’s add a label to the select menu. Press your left arrow key to move the insertion point in front of the menu element. Then click the Labelbutton in the Formstab of the Insertbar, as shown in the following screenshot. Alternatively, select Insert➤ Form➤Label.
This opens Split view with the insertion point between two <label> tags. Type Select galleryfollowed by a colon and a space. Then edit the opening <label>tag to add the forattribute, and set its value to selectGallery. Click back in Design view, or press F5 to view the change. The page should now look like this:
8.Save gallery_select.php, and test it in a browser. In most browsers, the drop- down menu should display Englandby default. However, Internet Explorer doesn’t play ball and displays the last item instead—in other words, Japan.
9.To fix the problem in Internet Explorer, you need to use the Spry equivalent of a conditional statement. You indicate a condition by adding the spry:chooseattrib- ute to the parent element—in this case, the <select> tag, which you need to amend like this:
<select name="selectGallery" id="selectGallery" ➥
spry:repeatchildren="dsGalleries" spry:choose="spry:choose">
10.Internally, a Spry data set is like a database recordset, and each row has an ID called ds_RowID, rather like a database primary key. Spry keeps track of the cur- rently selected row through another property called ds_CurrentRowID. When the data set is first created, ds_CurrentRowIDis set to the first row. So, to display the first <option> element correctly, you need to check whether ds_RowID and
19
ds_CurrentRowIDare the same. If they are, you want to add selected="selected"
to the <option>tag.
To create a condition in Spry, you use the spry:when attribute. Amend the
<option>tag like this:
<option value="{source}" spry:when="{ds_CurrentRowID} == {ds_RowID}" ➥ selected="selected">{label}</option>
11.Although this adds selected="selected" to the <option>tag when the two IDs are equal, it has the undesired side effect of preventing any other <option>tags from displaying. So, you need to add another <option>tag to display the remain- ing values. This uses the spry:defaultattribute like this:
<option value="{source}" spry:default="spry:default">{label}</option>
12.The completed <select>list looks like this:
<select name="selectGallery" id="selectGallery" ➥
spry:repeatchildren="dsGalleries" spry:choose="spry:choose">
<option value="{source}" spry:when="{ds_CurrentRowID} == {ds_RowID}" ➥ selected="selected">{label}</option>
<option value="{source}" spry:default="spry:default">{label}</option>
</select>
13.If you test the page in Internet Explorer, the correct item should now display when the page first loads. It also works correctly in other modern browsers. However, nothing happens yet if you select Japan. You’ll fix that next. But first, check your code, if necessary against gallery_select_03.phpin examples/ch19.
The Spry select list works like a normal <select>element. The value of labelin the each row of the data set is displayed as text in a drop-down menu, and the value of sourceis stored in the valueattribute of the corresponding <option>tag. To display the correct set of photos, you need to change the value of dsPhotos.gallery whenever an option is selected in the drop-down menu. You do this by creating a function that resets and refilters the dsPhotosdata set and by attaching the function to the onchangeattribute of the <select>menu, as shown in the next exercise.
The following instructions show you how to reset the data set that contains details of the photos to be displayed. Continue working with gallery_select.php. Alternatively, use gallery_select_03.phpin examples/ch19. All the work needs to be done in the underly- ing code, so roll up your sleeves and switch to Code view.
1.Amend the <select> tag to pass the value of the currently selected item in the drop-down menu to an event handler called changeSet()like this:
<select name="selectGallery" id="selectGallery" ➥
spry:repeatchildren="dsGalleries" spry:choose="spry:choose" ➥ onchange="changeSet(this.value)">
Wiring up the Spry select list
19
3.It’s not important where you define changeSet() within this code block, but to keep things grouped together logically, insert some space after the code shown on line 60 of the preceding screenshot, and enter the following code:
function changeSet(set) {
dsPhotos.gallery = set;
dsPhotos.filter(chooseSet);
}
This takes the value passed to the function and assigns it to dsPhotos.gallery. So, if Japanis chosen from the drop-down menu, dsPhotos.galleryis reset to 'JPN'.
The next line applies chooseSet() as a nondestructive filter in the same way as when the page first loads. Since chooseSet()filters the data set according to the value of dsPhotos.gallery, this refilters dsPhotos and selects only the Japanese photos.
4.Save gallery_select.php, and test the page in a browser. When you select Japan from the drop-down menu, the thumbnails and their associated captions should change. However, the image and description in the Spry detail region don’t update until you click one of the thumbnails or captions. This is because the changeSet() event handler doesn’t broadcast the change to the detail region. You need to reset the data set’s current row number to 0and then loop through each row until you find the first one that belongs to the filtered set.
5.Amend changeSet()like this:
function changeSet(set) {
dsPhotos.gallery = set;
dsPhotos.filter(chooseSet);
dsPhotos.setCurrentRowNumber(0);
var rows = dsPhotos.getData();
for (var i = 0; i < rows.length; i++) { if (rows[i]['Category'] == set) {
By passing this.valueas the argument, changeSet()obtains ENGor JPNfrom the
<option>tag. You now need to define changeSet().
2.Scroll up to the section in the <head>of the page where the two Spry data sets are defined. It looks like this:
dsPhotos.setCurrentRowNumber(i);
break;
} } }
The first line of new code resets the current row number of the dsPhotosdata set to 0. The next line uses the getData()method to store the data set temporarily in a variable called rows. The loop then iterates through each row, checking the value of the Categorycolumn and incrementing iby one each time. As soon as it finds a value that equals the value passed to changeSet(), it sets the data set’s current row number to iand brings the loop to an end with break.
6.Save gallery_select.php, and load it into a browser. Select Japanfrom the drop- down menu, and the new gallery is displayed without needing to reload the page, as shown in Figure 19-14. Check your code, if necessary, against gallery_select_04.php in examples/ch19.
Figure 19-14.The drop-down menu displays a new gallery without reloading the page.