Create | dynamic | data | Database creating dynamic List Boxes with Cross-browser compatibility
The aim of this article are to look in the opportunities for creating list boxes where the content changes dynamically Nding 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 this each list should change it content to match some condition specified in another list or The page.
The example we ' re using is this is ' selecting ', where's specified in separate fields For the "state", "City," and "Street". 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, where the list, where the ' street addresses then ' shows only the Ones in the city.
We'll look at the some of the ways so this might is achieved and then implement the solution that seems to offer the best op Portunity for General browser compatibility. We'll be using the sample pubs database, comes, and all versions of SQL Server, but can easily adapt the code to U Se your own data.
The Options Available
The core of the problem is how do we are going to get a list of matching cities and street addresses for the selected state O R 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 is requires more connections to the server, but'll probably transfer less data overall unless the user makes many diff Erent 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 are cached on the CL Ient. Then access it through the Recordset property of the the ' Data control ' and ' the information to populate ' the list boxes on de Mand 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 OB Ject. Then access it through the Recordset property of the the ' Data control ' and ' the information to populate ' the list boxes on de Mand 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" 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 with the use of the HttpRequest object to fetch a XML document from the server and access it using the XML Document Object Mo Del (DOM) to extract the data and populate the list boxes.
In IE5, create a Hypertext application (HTA) and with the FileSystemObject to store data on the client's disk, then use it To populate the ' list boxes on demand.
Use some kind of the ' Custom applet ' or ' ActiveX control ' to fetch the ' data on ' demand from the ' server using script code in the PAG E, 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 "information into it", then copy it to the list boxes on Dem and.
Use some kind of custom applets 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 applets, none of these methods is compatible across a range of different browsers. One technique that should work, however, are the use of framesets. We could put each list box on a separate page in a separate frame, and reload this page on demand; Using ASP to fill the list with the matching values.
An alternative approach would are to use a frameset in which one frame is not visible. We can then load this frame with a page containing the data we require the "We need to update" contents of any of The list boxes. Then all we have to be copy the data into the appropriate list box. We'll look in this second solution I seems to offer the best combination of usability and compatibility.
Creating a Hidden Frame
The "issue" is how we are going to create a hidden frame within a frameset. If we set the frame width to zero, Navigator'll fail to load the contents. This is probably a sensible action on Navigator ' s behalf, because the content won ' t be visible anyway. However, that's doesn ' t help us. Instead, we create a frameset containing one frame is one pixel wide, and another to fill the remainder of the browse R window. By removing the frame Bor
