InformIT: Sams Teach Yourself XML in 21 Days > Binding HTML Elements to XML Data

Binding HTML Elements to XML Data

To bind XML data to controls in Internet Explorer, use your standard XML document that contains the state data, which is shown in Listing 19.3. (Note that we've removed the units attribute from the <population> element because Internet Explorer can't convert that element's data into readable form when XML elements use attributes.)

Example 19.3. An XML Data Document (`ch19_03.xml`)

<?xml version="1.0" encoding ="UTF-8"?>
<states>

    <state>
        <name>California</name>
        <population>33871648</population>
        <capital>Sacramento</capital>
        <bird>Quail</bird>
        <flower>Golden Poppy</flower>
        <area units="square miles">155959</area>
    </state>

    <state>
        <name>Massachusetts</name>
        <population>6349097</population>
        <capital>Boston</capital>
        <bird>Chickadee</bird>
        <flower>Mayflower</flower>
        <area units="square miles">7840</area>
    </state>

    <state>
        <name>New York</name>
        <population>18976457</population>
        <capital>Albany</capital>
        <bird>Bluebird</bird>
        <flower>Rose</flower>
        <area units="square miles">47214</area>
    </state>
</states>

You'll start by using XML data islands to bind to the data in ch19_03.xml. All you need to do is change the DSO you're using to an XML island by using the <XML> element, as shown in Listing 19.4.

Example 19.4. Reading XML Data with XML Islands (`ch19_04.html`)

<HTML>
    <HEAD>
        <TITLE>
            Binding with XML data islands
        </TITLE>
    </HEAD>

    <XML SRC="ch19_03.xml" ID="states"></XML>

    <BODY>
        <H1>
            Binding with XML data islands
        </H1>

        Name: <INPUT TYPE="TEXT" DATASRC="#states"
            DATAFLD="name" SIZE="10">

        <BR><BR>
        Population: <INPUT TYPE="TEXT" DATASRC="#states"
            DATAFLD="population" SIZE="10">

        <BR><BR>
        Capital: <SPAN DATASRC="#states"
            DATAFLD="capital"></SPAN>

        <BR><BR>
        Bird: <SELECT DATASRC="#states"
            DATAFLD="bird" SIZE="1">
            <OPTION VALUE="Quail">Quail
            <OPTION VALUE="Chickadee">Chickadee
            <OPTION VALUE="Bluebird">Bluebird
        </SELECT>

        <BR><BR>
        Flower: <SPAN DATASRC="#states" DATAFLD="flower">
        </SPAN>

        <BR><BR>
        <BUTTON ONCLICK=
            "states.recordset.moveFirst()">&nbsp;&lt;&lt;&nbsp;
        </BUTTON>
        <BUTTON ONCLICK="if (!states.recordset.BOF)
            states.recordset.movePrevious()">&nbsp;&lt;&nbsp;
        </BUTTON>
        <BUTTON ONCLICK="if (!states.recordset.EOF)
            states.recordset.moveNext()">&nbsp;&gt;&nbsp;
        </BUTTON>
        <BUTTON ONCLICK=
            "states.recordset.moveLast()">&nbsp;&gt;&gt;&nbsp;
        </BUTTON>
    </BODY>
</HTML>

The results are the same as when you used the MSHTML DSO and HTML data, as shown in Figure 19.2.

Figure 19.2 Data binding with XML data islands.

Now you have a way to display XML data in HTML controls in Internet Explorer.

Binding HTML Tables to XML Data | Next Section

Previous Section

Binding HTML Elements to XML Data

Example 19.3. An XML Data Document (ch19_03.xml)

Example 19.4. Reading XML Data with XML Islands (ch19_04.html)

Example 19.3. An XML Data Document (`ch19_03.xml`)

Example 19.4. Reading XML Data with XML Islands (`ch19_04.html`)