October 26, 2016
Hot Topics:

Creating a Double-Combo Linked List with Ajax

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

Presenting the results

We now have the results of our database query in an XML document, and we are going to navigate through its elements using JavaScript's DOM API. We can easily jump to a particular element in the document using a function called getElementsByTagName(). This function uses the element's name to look it up in the DOM, somewhat like the alphabetical tabs that stick out in an old-fashioned Rolodex. Since many elements in an XML document can have the same name, getElementsByTagName() actually returns an array of elements, in the order that they appear in the document.

Navigating the XML document

Now we will finish the client-side script that adds the options to the selection list. The names of the form and the selection element that we are going to populate are specified in the XML document along with all of the available options for the list. We need to traverse the document's elements in order to locate the options and insert them into our select element.

Once the ContentLoader receives the XML document from the server, it will call the FillDropDown() function that appears in listing 2. In FillDropDown(), we navigate the entry elements of the XML document, and create a new Option object for each. These Option objects represent the text and value pairs that will be added to the selection list. Listing 5 shows the FillDropDown() function in full.

Listing 5: Updating the page with data from the XML response

Click here for a larger image.

The FillDropDown() function is called by the ContentLoader once it has received and parsed the server's XML response. The ContentLoader object is accessible within FillDropDown() through the this reference, and we use it to obtain the response document, responseXML.

The following list references the callouts in listing 5.

  1. Once we have a reference to the response's documentElement, we can begin using JavaScript's DOM functions to navigate its nodes. The first information we want to obtain is the target select list to which we will add the new options. We look up the element named selectElement using getElementsByTagName(), taking the first item from the array it returns.
  2. We can then navigate to its child nodes. The first child contains the form's name and the second child the select list's name.
  3. Using these two values, we reference the target selection list itself, and clear any existing options by setting the length of its options array to 0. Now we can add the new options to the list. We need to access the XML's document entry elements, so we call on getElementsByTagName() once again.
  4. This time we need to loop through the array of elements it returns, and obtain the text and value pairs from each. The first child node of each entry is the option text that is to be displayed to the user, and the second child node is the value. Once these two values are obtained, we create a new Option object, passing the option text as the first constructor parameter and the option value as the second. The new option is then added to the target select element, and the process is repeated until all the new options have been added. The method signature for select.add() varies between browsers, so we use a try...catch statement to find one that works.

This completes the coding for our double combo box. We can now load up our HTML page, select a region, and see the second drop-down populated directly from the database.

Figure 7 shows the double-combo list in action. In this example, the Eastern region is selected from the first list, and the corresponding territories are retrieved from the database and displayed in the second list. The Southern region is then selected from the first list, and its corresponding territories fill in the second list.

Figure 7: The double-combo list in action

As you can see in figure 7, we still have one job left: changing the selection list's appearance to make it more appealing. The second selection list's size expands as it is populated with options. We can fix this shift in size by applying a Cascading Style Sheet (CSS) rule to the element.

Applying Cascading Style Sheets

Cascading Style Sheets allow for changes in the visual properties of the selection element. We can change the font color, the font family, the width of the element, and so on. In figure 7 we saw that our second select element is initially only a few pixels wide since it contains no options. When the Eastern region is chosen from the first selection list, our second select element expands. This change of size is visually jarring and creates an unpleasant user experience.

The way to fix this issue is to set a width for the selection list:

<select name="ddlTerritory" style="width:200px"></select>

However, there may still be a problem if one of the displayed values is longer than the width we set. In Firefox, when the element is in focus the options under the drop-down list expand to display their entire text. However, in Microsoft Internet Explorer, the text is chopped off and is not visible to the user, as shown in figure 8.

Figure 8: Cross-browser differences in how a select element is rendered

To avoid the problem with Internet Explorer, we need to set the width of the selection list to the width of the longest option. Most of the time the only way to determine the number of pixels required to show the content is by trial and error.

Some developers use browser-specific hacks in their CSS only to set the width wider for IE:


Internet Explorer recognizes the width with the underscore, while other browsers ignore it. Therefore, IE's selection box will be 250 pixels wide, while the other browsers' selection width will be 100 pixels wide. However, it's inadvisable to rely on browser bugs such as this one, as they may be fixed in a future version of the browser and break the way your page is displayed.

Our next article, to be published on January 18th will look at ways to add more advanced features to our double-combo script.

About the Authors

Dave Crane has pushed the boundaries of DHTML, and latterly Ajax, on digital TV set-top boxes, in home automation and banking and financial systems. He lives in Gloucestershire, UK.

Eric Pascarello is an ASP.NET developer and a moderator of the HTML and JavaScript forum at JavaRanch. He lives in Laurel, MD.

Darren James is the architect of the opensource Rico project. He lives in Sunnyvale, CA.

About the Book

Ajax in Action
By Dave Crane, Eric Pascarello, and Darren James

Published: October, 2005, Paperback: 680 pages
Published by Manning Publications Co.
ISBN: 1932394613
Retail price: $44.95
This material is from Chapter 9 of the book.

Page 3 of 3

Comment and Contribute


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



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel