AJAX In Action [159]
IETechCol/dnwebgen/ie_leak_patterns.asp. Richard Cornford’s suggested solution can be found on Google Groups by searching for “cornford javascript fixCircleRefs()”—the full URL is too long to print out here. Licensed to jonathan zheng Part 4 The five complete Ajax projects in this section demonstrate the full process of building compelling interactive elements for your web applications. In each case, we’ve developed a straightforward example, step by step, so you can see how it works. We’ve then refactored the code so that the example can be dropped into your own projects easily. The examples cover the full spectrum of what Ajax can do, from enhancing form elements to developing complete portal solutions, communicating to both your own server-side processes and to standard Internet services. We’ve deliberately chosen a mixture of popular server-side programming languages in which to implement the server-side code, so you’ll find a medley of PHP, Java, VB.Net and C# in this section. The downloadable code available from the website will contain multiple implementations of the sever-side back-end for each chapter. Have fun! Licensed to jonathan zheng Licensed to jonathan zheng 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 327 Licensed to jonathan zheng 328 CHAPTER 9 Dynamic double combo 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. There are two traditional solutions for implementing the dynamic filling of the second selection list: one is implemented on the client and the other on the server. Let’s review how they work in order to understand the concepts behind these strategies and the concerns developers have with them. 9.1.1 Limitations of a client-side solution The first option a developer traditionally had was to use a client-side-only solution. It uses a JavaScript method in which the values for the selection lists are hard-coded into JavaScript arrays on the web page. As soon as you pick a shirt size, the script seamlessly fills in the next selection list by selecting the values from the array. This solution is shown in figure 9.1. One problem with this client-side method is that, because it does not communicate with the server, it lacks the ability to grab up-to-date data at the moment the user’s first selection is made. Another problem is the initial page-loading time, which scales poorly as the number of possible options in the two lists grows. Imagine a store with a thousand items; values for each item would have to be placed in a JavaScript array.
Ajax by example