Creating Dynamic List Boxes With Cross-Browser Compatibility
The aim of this article is to look at the opportunities for creating list boxes where the content changes dynamically depending on some action taken by the user in the page. Where you have a form that the visitor uses to provide information, this technique is often useful. The principle is that each list should change its content to match some condition specified in another list or control on the page.
The example we're using is that of selecting an address from a database, where the address is specified in separate fields for the state, city, and street address part. As the user selects a state from a list, the list of cities changes to reflect those in the chosen state. The same happens when the user then selects a city from that list, where the list of street addresses then shows only the ones in that city.
We'll look at some of the ways that this might be achieved and then implement the solution that seems to offer the best opportunity for general browser compatibility. We'll be using the sample pubs database that comes with all versions of SQL Server, but you can easily adapt the code to use your own data.
The Options Available
The core of the problem is how we are going to get a list of matching cities and street addresses for the selected state or city. There are several options for fetching and storing all the available data on the client, and using this cached data. Alternatively, we can implement a solution that fetches the required data each time a selection is made. This requires more connections to the server, but will probably transfer less data overall unless the user makes many different selections.
In Internet Explorer 4 or 5, we might consider:
Remote Data Services (RDS) ?fetch a recordset from a database using the RDS Data Control object, which is cached on the client. Then access it through the recordset property of the data control and use the information to populate the list boxes on demand by iterating through or filtering the recordset.
Tabular Data Control (TDC) ?fetch a text file containing the details from the server using the RDS Tabular Data Control object. Then access it through the recordset property of the data control and use the information to populate the list boxes on demand by iterating through or filtering the recordset.
XML Data Island ?fetch an XML document containing the information and cache it on the client. Then use the recordset property of the data杋sland to access the details and populate the list boxes on demand, in the same way as with RDS.
Create a hidden <IFRAME> element and load the information into it from the server, then copy it to the list boxes on demand.
In IE5, use the HttpRequest object to fetch an XML document from the server and access it using the XML Document Object Model (DOM) to extract the data and populate the list boxes.
In IE5, create a Hypertext Application (HTA) and use the FileSystemObject to store data on the client's disk, then use it to populate the list boxes on demand.
Use some kind of custom applet or ActiveX control to fetch the data on demand from the server using script code in the page, and then use the data to populate the list boxes.
Meanwhile, in Navigator 4.x or 6 we could:
Use a hidden <LAYER> element and load the information into it from the server, then copy it to the list boxes on demand.
Use some kind of custom applet to fetch the data on demand from the server using script code in the page, and then use the data to populate the list boxes.
However, for a Compatible Solution:
With the exception of a custom Java applet, none of these methods is compatible across a range of different browsers. One technique that should work, however, is the use of framesets. We could put each list box on a separate page in a separate frame, and reload that page on demand; using ASP to fil