• Choose a category
• All
• Classic-Fiction

By Root 3951 0

the root selectChoice element and write the response to the output page j. The XML response document is returned to the client, and the ContentLoader object is notified that the server-side process is complete. The ContentLoader calls the function FillDropDown() on the client, which will process the XML that we just created. Let’s recap what we’ve done on the server. We have taken the value from a selected item in a selection list and have run a query against a database without posting back the entire page to the server. We have then generated an XML document and returned it to the client. The next step in the process takes us back to the client side, where we must now convert the XML elements into options for our second selection list.

9.4 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.

9.4.1 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 9.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 Licensed to jonathan zheng

340

CHAPTER 9

Dynamic double combo

will be added to the selection list. Listing 9.5 shows the FillDropDown() function in full. Listing 9.5 Updating the page with data from the XML response

function FillDropDown(){

var xmlDoc = this.req.responseXML.documentElement; b

Get response XML

document

var xSel = xmlDoc.

getElementsByTagName('selectElement')[0];

c Get name of

var strFName = xSel.

form and

childNodes[0].firstChild.nodeValue;

select element

var strEName = xSel.

childNodes[1].firstChild.nodeValue;

var objDDL = document.forms[strFName].

d Obtain a

elements[strEName];

reference the

objDDL.options.length = 0;

select element

var xRows = xmlDoc.

getElementsByTagName('entry');

for(i=0;ivar theText = xRows[i].

childNodes[0].firstChild.nodeValue;

var theValue = xRows[i].

childNodes[1].firstChild.nodeValue;

e Loop through the

var option = new Option(theText,

XML document

theValue);

adding options

try{

objDDL.add(option,null);

}catch (e){

objDDL.add(option,-1);

}

}

}

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. Once we have a reference to the response’s documentElement b, 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. We can then navigate to its child nodes c. The first child contains the form’s name and the second child the select list’s name.

Licensed to jonathan zheng

Presenting the results

341

Using these two values, we reference the target selection list itself d, and clear any existing options by setting the