Chapter 9. Dynamic double combo

 

This chapter covers

  • The client-side JavaScript
  • The server side in VB .NET
  • Data exchange format
  • Refactoring into a reusable component
  • Dynamic select boxes

If you have ever shopped for a new shirt online, you may have run into the following problem. You pick the shirt size from one drop-down list, and from the next drop-down list you select the color. You then submit the form and get the message in giant red letters: “Sorry, that item is not in stock.” Frustration sets in as you have to hit the back button or click a link to select a new color.

With Ajax we can eliminate that frustration. We can link the selection lists together, and when our user selects the size option from the first list, all of the available colors for that shirt can be populated to the second list directly from the database—without the user having to refresh the whole page. People have been linking two or more selection lists together to perform this action with either hard-coded JavaScript arrays or server-side postbacks, but now with Ajax we have a better way.

9.1. A double-combo script

In a double-combination linked list, the contents of one selection list are dependent on another selection list’s selected option. When the user selects a value from the first list, all of the items in the second list update dynamically. This functionality is typically called a double-combo script.

9.2. The client-side architecture

9.3. Implementing the server: VB .NET

9.4. Presenting the results

9.5. Advanced issues

9.6. Refactoring

9.7. Summary