Resolving user interface problems with XML data islands

xml| solve the problem of | data | problem dependent list problem (dependent list problem) is often raised. Problems often arise when you have more than two selection lists, a master list has several options, and you want to display related options in other subordinate lists when the user selects an option in the master list. You can do this by extensible Markup Language (XML) data island, which embeds XML into your HTML. This result has practical significance for XML application in the client.

Suppose you work for a company called "CHEAPPC", and you are responsible for letting users visiting the company's website find the "CHEAPPC" store in the state where the user is located. On the company's website you list the state names. When a customer clicks on a state in the master list, you want to display a list of related stores in the dependent list.

The question is: How do you populate a dependent list without refreshing the page or sending a message to the server every time the user selects in the master list? The XML data island is a perfect solution to this problem. When a user makes a request, all store data is concatenated into an XML string (Listing 1). The result returned is a data island embedded in an HTML page. The data island uses the following XML structure:

The root element contains a list of state names, and the list of each state name in turn contains a list of stores. Each store has a corresponding ID and city name. To generate this XML string, you need to query the database with ActiveX Data Object (ADO) and format the query results with an XML tag. There are some differences between formatting the recordset data into an HTML table and formatting the recordset data into an XM file. In the second half of this article, I'll show you how to avoid too much inline work to improve response time. You can click here to download the routines.

Move the process to the client

When the Web server returns to the Web page, all further actions are processed on the client. I used to think that if you send a large data assembly to the client, the program slows down. But then I found that sending all the data at once was much faster than exchanging data back and forth between the client and the server. The only pause that can be noticed is a brief initialization pause when the IE5 XML parser reads the data.

The HTML file itself contains 4 elements: a select list (the master list) that holds the state name data, the XML data, the div-tag placeholder for a subordinate list, and two scripts. The second script executes (Listing 2) When the option of the state name selection list changes.

You want to be able to get the appropriate store list from the data island each time a user chooses a state. So you need a script to handle the onchange event for the state list of choices:

In this script, the value of the state name select list is again:

Dim statecode
Statecode=document.all.state.value

The list of stores in the selected state is then restarted. You can get this list in two ways. The first option is to get a reference to the Recordset property of the tag character:

Dim R
Set R = Xmldata.recordset

The recordset obtained by this method is a standard ADO Recordset object, and the field names correspond to the markers. This method works well only if you have a simple XML data file with the same field for each record.

The second method is more powerful and universal. IE5 treats XML data islands like other HTML elements. In order to access the XML data on the client, you simply refer to the element by ID. IE5 will return the root element of the XML tree (document Element):

Set xml = document.all ("XMLData")

You use this document element to perform extensible Stylesheet Language (XSL) query statements. Using XSL query statements, you can get a list of nodes at a given level, a list of nodes that contain the specified attributes, or any combination of both. For example, the following query statement returns all store nodes that meet the user's chosen state:

Dim nodes
Set nodes = Xml.selectnodes ("locations/state[@code = '" & Statecode & "']/store")

The XSL search string looks much like a file path, and it has values for the corresponding levels of the XML tree. Separate each level with "/". Searches for a specified number of nodes in the [] of the associated node with a match of "node = number", and "@" before the property name to search for the node that contains the specified attribute. Running the SelectNodes method returns a Ixmldomnodes collection object. Finally, the subordinate list is displayed. The easiest way to do this is by changing the list of nodes returned by the XSL query statementThe value of the marker:

Set alist = document.all ("Cities")
AList.options.length = 0
i = 0
For all N in nodes
Anid = N.selectsinglenode ("id"). Text

Acity = N.selectsinglenode _ ("City"). Text

AList.options.length = _alist.options.length + 1

Alist.options (i). id = Anid

Alist.options (i). Value = acity

Alist.options (i) innertext = acity

i = i + 1
Next

Now you know how to use an XML data island to solve a dependent list problem. Note: This technique is not suitable for large-scale data-such as those of thousands of records-but in that case, it is mostly a question of how to display, not a technical one. If you find that a query statement might return a large set of records that are not appropriate, you can limit the number of records to be returned (for example, by providing a "more record" button for the user) and modify the user interface so that users can click on the next level of content, thereby limiting the number of entries that the user must select.

[1] [2] Next page