jQuery in Action
238
CHAPTER 8
Talk to the server with Ajax
purchase. We like purchases, so our next step is to add controls that let them
pick color and size.
pick color and size.
Remember that we're a closeout business--that means we don't always have a
full line of any one style available. Only certain colors are available from day to
day, and only certain sizes are available in those colors. So we can't hard-code lists
of colors and sizes; we need to obtain these lists dynamically from our real-time
inventory database.
day, and only certain sizes are available in those colors. So we can't hard-code lists
of colors and sizes; we need to obtain these lists dynamically from our real-time
inventory database.
To allow the customer to select colors and sizes, we'll add two dropdowns to
our form: one for color and one for size. The initial appearance of our enhanced
form is shown in figure 8.5, and you can load the
form is shown in figure 8.5, and you can load the
HTML
page for this example
from the file chapter8/bootcloset/boot.closet.2.html.
The dropdown element for choosing the boot style is enabled (and pre-filled with
the available styles as we discussed earlier), but the color and size controls are dis-
abled and empty. We can't pre-fill these dropdowns because we don't know what
colors to display until a style is picked, and we don't know what sizes to display
until we know both the style and the color.
the available styles as we discussed earlier), but the color and size controls are dis-
abled and empty. We can't pre-fill these dropdowns because we don't know what
colors to display until a style is picked, and we don't know what sizes to display
until we know both the style and the color.
Given that, here are the things that we wish to accomplish for these controls:
When a style is selected, the color dropdown should be enabled and filled
with the colors available for the selected style.
with the colors available for the selected style.
Figure 8.5 The initial state of the order form with the dependent dropdowns in an empty and
disabled state
disabled state