Data Binding with XML Data Islands and Internet ExplorerInternet Explorer allows you to databind to XML data islands. The interesting thing is that IE can recognize an HTML element as an XmlDocument object. For example, if I have the following XML data island in my HTML:
<
xml id="xmlPeople">
<people>
<person>
<age>31</age>
<name>Johnny</name>
</person>
<person>
<age>52</age>
<name>Steve</name>
</person>
<person>
<age>34</age>
<name>Timmy Braehans</name>
</person>
</people>
</xml> I can reference the XmlDocument object via
window.document.All("xmlPeople"). Furthermore, the XmlDocument object has an ADO Recordset object as a property. So you can refer to the recordset via window.document.All("xmlPeople").Recordset. On a control such as an HTML input control, you can then set the datasrc attribute to point to the XML data island's id attribute and datafld attribute to define which field to display on the bound control. For example the following input control is bound to the xmlPeople data island's name field for the current record. <
input type="text" id="personName" datasrc="#xmlPeople" datafld="name" name="personName"> Using the Recordset property object, you can use the standard methods such as MoveNext, MoveFirst, MoveLast, etc to navigate through the XML data. Furthermore, you can bind an HTML table to a data island, plus you can control the number of records displayed in the table using the
datapagesize attribute. For example, the following table sets the datasrc attribute to the ID of the xmlPeople data island and sets the datapagesize to a value of 2. This means that 2 out of the 3 XML people records will be displayed at a time as you control the navigation of the data, possibly via the Recordset property object on the XmlDocument object on the page: <
table id="tbData" datapagesize="2" datasrc="#xmlPeople">
<tr>
<td>
<span datasrc="#xmlPeople" datafld="name"></span>
</td>
<td>
<span datasrc="#xmlPeople" datafld="age"></span></td>
</tr>
</table> If you change the datapagesize to a value of 1, only one record will be bound a time, meaning only one TR tag in the table will exist when the table is bound. As you navigate through the records in the data island, a different record will be displayed.
Putting it all Together
So now that we know how to bind and control various bound controls and the XmlDocument's Recordset, our complete page's HTML content could look like the following. Try copying and pasting into your favorite HTML editor and opening the page with IE. Enjoy!
<
html>
<head>
<title>Data Binding with IE</title>
</head>
<body>
<h3>Data binding to an XML data island using IE</h3> <xml id="xmlPeople">
<people>
<person>
<age>31</age>
<name>Johnny</name>
</person>
<person>
<age>52</age>
<name>Steve</name>
</person>
<person>
<age>34</age>
<name>Timmy Braehans</name>
</person>
</people>
</xml>
<script language="vbscript">
Sub ButtonNext()
Dim rs
' The XML data Island is of type XmlDocument, which has a Recordset property (ADO)
Set rs = window.document.All("xmlPeople").Recordset
' Navigate data in table
tbData.nextPage
If Not rs.AbsolutePosition < 0 Then
rs.MoveNext
Else
rs.MoveFirst
tbData.firstPage
End If
End Sub
</script> <
table id="tbData" datapagesize="1" datasrc="#xmlPeople" width="400">
<tr><td colspan="2" align="center"><b>DataBound HTML Table</b></td></tr>
<tr><td width="200"><b>Name</b></td><td width="200" align="right"><b>Age</b></td></tr>
<tr>
<td><span datasrc="#xmlPeople" datafld="name"></span></td>
<td align="right"><span datasrc="#xmlPeople" datafld="age"></span></td>
</tr>
</table><br /><br /> <
table id="Table1" width="400">
<tr><td colspan="2" align="center"><b>DataBound Input controls</b></td></tr>
<tr>
<td width="200">
<input type="text" id="personName" datasrc="#xmlPeople" datafld="name" name="personName">
</td>
<td width="200">
<input type="text" id="personAge" datasrc="#xmlPeople" datafld="age" name="personAge">
</td>
</tr>
</table><br><br> <
input type="button" value="Move Next" id="Button" onmouseup="ButtonNext" name="Button"> </
body>
</html>