July 26, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Creating a Double-Combo Linked List with Ajax

  • January 4, 2006
  • By Dave Crane, Eric Pascarello, and Darren James
  • Send Email »
  • More Articles »

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.

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

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 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. Since the code to represent this array would be part of the page's content, the user might face a long wait when first loading the page. There is no efficient way to transmit all of that information to the client up-front.

Figure 1: The client-side solution

On the other hand, the JavaScript method has one benefit: after the initial load time, it is fast. There is no major lag between selecting an option from the first selection list and the second list being populated. So this method is only usable if you have just a few double-combination options that will not impact the page-loading time significantly.

Limitations of a server-side solution

The next traditional solution is the submission of a form back to the server, which is known as a page postback. In this method, the onchange event handler in the first selection list triggers a postback to the server, via the submit() method of the form's JavaScript representation. This submits the form to the server, transmitting the user's choice from the first select element. The server, in turn, queries a database based on the value that the user selected, and dynamically fills in the new values for the second list, as it re-renders the page. You can see the process of the server-side method in figure 2.

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.

Ajax-based solution

We can avoid the problems of the JavaScript and server-side solutions by using Ajax to transfer data to the server and obtain the desired information for the second selection list. This allows the database to be queried and the form element to be filled in dynamically with only a slight pause. Compared with the JavaScript method, we are saving the extra page-loading time that was required to load all of the available options into the arrays. Compared with the server-side postback solution, we are eliminating the need to post the entire page back to the server; instead, we are passing only the information necessary. The page is not reloaded, so you do not have to worry about the scroll position of the page or what option was selected in the first drop-down field. The initial page loading time is also shortened since the JavaScript arrays do not have to be included in the page.

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

The client-side architecture is foreign territory to most developers who normally write server-side code. In this case, it is not that scary since we need to take only a few steps to get the options into our second selection list. If you have implemented the JavaScript or server-side solutions for a double combo before, then you have already have experience with part of the processes involved.

As you can see in figure 4, this application's client-side interaction does not require many steps. The first step is to build the initial form. The user then selects an item from the form's first select. This initiates the second step of the client-side architecture, which is to create an XMLHttpRequest object to interact with the server. This transmits the user's selection to the server, along with the names of the form and the control that will be updated when the server's response is received. The third part requires us to add the contents of the server's XML response to the second select element. JavaScript's XML DOM methods are used to parse the XML response.

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

Method Advantages Disadvantages
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.

The first selection list needs to have an onchange event handler added to its select element, as shown in listing 1. This event handler calls the JavaScript function FillTerritory(), which initiates the process of filling the second selection list by sending a request to the server.

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



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel