jQuery in Action
242
CHAPTER 8
Talk to the server with Ajax
This notation defines an array of objects, each with two properties:
value
and
caption
. These objects define the value and display text of the options to be
added to the color dropdown. We populate the dropdown by passing the evalu-
ated
ated
JSON
value to the
loadSelect()
command applied to the dropdown. Yes,
loadSelect()
is another custom command that we'll define ourselves.
Finally, whenever the value of the color dropdown changes, we need to make
sure that the size dropdown reflects the new value; we call the
adjustSizeDrop-
down()
function
e
to apply a series of operations to the size dropdown similar to
the routine for the color dropdown.
The definition of that
adjustSizeDropdown()
function is as follows:
function adjustSizeDropdown() {
var styleValue = $('#styleDropdown').val();
var colorValue = $('#colorDropdown').val();
var dropdownSet = $('#sizeDropdown');
if ((styleValue.length == 0)||(colorValue.length == 0) ) {
dropdownSet.attr("disabled",true);
$(dropdownSet).emptySelect();
}else {
dropdownSet.attr("disabled",false);
$.getJSON(
'getSizes.jsp',
{style:styleValue,color:colorValue},
function(data){$(dropdownSet).loadSelect(data)}
);
}
}
It should be no surprise that the structure of this function is strikingly similar to
that of the
that of the
adjustColorDropdown()
function. Aside from operating upon the size
dropdown rather than the color dropdown, this function looks at both the values of
the style and color dropdowns to decide whether the size dropdown is to be
enabled or disabled. In this case, both the style and color values must not be empty
for the size dropdown to become enabled.
the style and color dropdowns to decide whether the size dropdown is to be
enabled or disabled. In this case, both the style and color values must not be empty
for the size dropdown to become enabled.
If enabled, the size dropdown is loaded--once again using
$.getJSON()
--from
a server-side resource named
getSizes.jsp
, which is passed both the style and
color values.
With these functions in place, our cascading dropdowns are now operational.
Figure 8.5 showed us what the page looks like after its initial display, and
figure 8.6 shows the relevant portion of the page after a style has been selected
(top part of figure) and after a color has been selected (bottom part of figure).
figure 8.6 shows the relevant portion of the page after a style has been selected
(top part of figure) and after a color has been selected (bottom part of figure).
The full code for this page is shown in listing 8.6 and can be found in the file
chapter8/bootcloset/boot.closet.2.html.