Creating a Double-Combo Linked List with Ajax
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.
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.
Limitations of a client-side solution
Figure 1: The client-side solution
Limitations of a server-side solution
Figure 2: The client-side architecture
A drawback to the server-side method is the number of round-trips to the server; each time the page is reloaded, there is a time delay, since the entire page has to re-render. Figure 2 shows all of the extra processing required. Additional server-side code is also needed to reselect the user's choice on the first select element of the re-rendered page. Moreover, if the page was scrolled to a particular spot before the form was submitted, the user will have to scroll back to that location after the page reloads.
This example will involve two selection lists. The first selection list contains the sales regions for a company. The second selection list displays the related territories for the selected region, as shown in figure 3.
When the user selects a region from the first selection list, the client sends a request to the server containing only the necessary information to identify both the selected region, and the form control to populate with the list of territories. The server queries the database and returns an XML document containing the names of the territories in the selected region, and also the names of the form and the control that the client needs to update. Let's see how this works.
The first step in building the Ajax solution takes place on the client.
Figure 3: The Ajax solution
The client-side architecture
Figure 4: Client-side architecture, showing the Ajax interaction
Let's go over the first two steps, which happen before the Ajax request is sent to the server. We'll explain the third step (the DOM interaction with the server's XML response document) in more detail later, since we need to talk about the server before we can implement the client-side architecture completely.
Designing the form
The form in this example involves two select elements. The first select element will initially contain values, while the second selection list will be empty. Figure 5 shows the form.
Figure 5: Available options in the first select element
The first form element can be filled in three separate ways initially, as shown in table 1.
Table 1: Three ways to populate a form element
|Hard-code the values into the select element.||No server-side processing.||Options cannot be dynamic.|
|Fill in the values by using a server-side script.||Options can be dynamic and pulled from the database.||Requires extra processing on the server.|
|Use Ajax to fill in the values; this method posts back to the server to retrieve the values.||Can be linked to other values on the page.||Requires extra processing on the server.|
The first method is to hard-code the values into the select element. This method is good when you have a few options that are not going to change. The second method is to fill in the values by using a server-side script. This approach fills in the options as the page is rendered, which allows them to be pulled from a database or XML file. The third method is to use Ajax to fill in the values; this method posts back to the server to retrieve the values but does not re-render the entire page.
In this example, we are hard-coding the values into the selection list since there are only four options and they are not dynamic. The best solution for dynamically loading values into the first selection list is to use a server-side script that fills the list as the page is loaded. Ajax should not be used to populate the first selection list unless its contents depend on other values the user selects on the form.
Listing 1: The double-combo form
<form name="Form1"> <select name="ddlRegion" onchange="FillTerritory(this,document.Form1.ddlTerritory)"> <option value="-1">Pick A Region</option> <option value="1">Eastern</option> <option value="2">Western</option> <option value="3">Northern</option> <option value="4">Southern</option> </select> <select name="ddlTerritory"></select> </form>
The code in listing 1 creates a form that initiates the FillTerritory() process when an item is chosen in the first selection list. We pass two element object references to the FillTerritory() function. The first is the selection list object that the event handler is attached to, and the second is the selection list that is to be filled in. The next step for us is to develop the client-side code for FillTerritory(), which submits our request to the server.
Page 1 of 3