Bind HTML data elements to XML data islands

XML provides a universal medium for delivering data, and IE 5.0+ offers the functionality to quickly create data solutions. One of these functions is the ability to bind HTML elements to data sources, specifically, XML data islands. The XML data will reflect any change to the data in the bound element; XML data islands also provide scriptable events.

You access the data in the XML data islands through standard DOM methods, e.g., selectSingleNode(), selectNodes(), etc. This functionality makes it easy to quickly create data entry devices and reports.

An XML data island is XML surrounded by <XML> tags in a DHTML document. Here's an example of an XML data island:

<XML ID="xmlTest" NAME="xmlTest">

<root>
    <data>
        <cat>Whiskers</cat>
        <dog>Spot</dog>
        <fish>Bubbles</fish>
    </data>


</root>

</XML>

In order to bind this data to HTML elements, you must specify the DATASRC and DATAFLD attributes on those elements. The following code demonstrates how to bind the "cat" field to an <INPUT> element:

<INPUT TYPE="text" DATASRC="#xmlTest" DATAFLD="cat" SIZE=15>

The "#" preceding the XML data island ID in the DATASRC attribute must be present in order to bind the data. Since the value of the <INPUT> is bound to the XML data source, the XML data will reflect any change to the value of the <INPUT>. When the page loads, the value of the <INPUT> will be "Whiskers". If a user types in a new name, the "text" property of the "cat" XML node will change to the new value of the <INPUT>.

Another handy feature is the ability to bind a <TABLE> to a data source. When you bind the <TABLE> to the XML data island, you simply set the DATASRC attribute of the <TABLE> to the data island ID. As long as you have a bound element in one <TR>, the bound <TABLE> will reflect all the rows in your data island. Here's an example:

<XML ID="xmlTest" NAME="xmlTest">

<root>
    <dog>
        <name>Spot</name>
    </dog>
    <dog>
        <name>Rover</name>
    </dog>
    <dog>
        <name>Jack</name>
    </dog>


</root>

</XML>

<TABLE BORDER=1 DATASRC="#xmlTest">
    <TR>
        <TD><SPAN DATAFLD="name"></SPAN></TD>
    </TR>

</TABLE>

What you should see with this code is a table with three rows, and each row will have the dogs' names included in the cell.

Let's use this information to create a simple form for submitting data to be stored in a database. This form will be for the user to add/update personal information. Here's the HTML/XML:

<XML ID="xmlUser" NAME="xmlUser">
    <root>
        <user>
            <user_id>1</user_id>
            <first_name>John</first_name>
            <mi>Q</mi>
            <last_name>Public</last_name>
            <address_line1>123 Some St.</address_line1>
            <city>Anywhere</city>
            <state>CA</state>
            <zip>99999</zip>        </user>
    </root>


</XML>

<FORM>

<TABLE BORDER="0" DATASRC="#xmlUser">

<TR><TD>
    <INPUT TYPE="text" DATAFLD="first_name" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="mi" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="last_name" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="address_line1" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="city" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="state" SIZE=10><BR>
    <INPUT TYPE="text" DATAFLD="zip" SIZE=10><BR>


</TD></TR>

</TABLE>

</FORM>

<FORM METHOD="POST" ACTION="parsing_page.asp"
 ID="frmSubmit" NAME="frmSubmit">

<INPUT TYPE="hidden" ID="txtXML" NAME="txtXML">

</FORM>

Somewhere on the page, you should add an <INPUT> of type "button". Then add this function to the "onclick" event:

functionbutton_onclick() {
    document.frmSubmit.txtXML.value = xmlUser.xml;
    document.frmSubmit.submit();

}

In your parsing page, you should load the XML that's passed through in the "txtXML" request. You can then load this XML into a DOM document to parse the information. In ASP, you would load the XML like this:

Dim oDOM
oDOM = Server.CreateObject("MSXML.DOMDocument")
oDOM.loadXML Request("txtXML")

Then you would handle the XML from there. (This is outside the scope of this article.)

Once you have your data in XML, a world of opportunities and tools (both client side and server side) are open to you.