XML.HTMLTeacher.Com XML - Data Binding Internet Explorer Only

XML.HTMLTeacher.Com
[Search] [Contact] [Sitemap]

XML
[Main]
[XML]
[Data Binding]

[Classes]
[XHTML]
[XML]
[CSS]
[Design]
[Programming]
[Marketing]

These examples by no means encompass all that can be achieved with Data Binding. These examples do not use any scripting which would add to the overall functionality.

Data Binding Resources
Microsoft Library
Web Reference

Only Internet Explorer supports the binding of data from an XML document to an HTML document.

The XML document

This is the XML file used for the examples.

1. Binding all the XML elements to a single HTML page

The HTML document markup

The first line immediately after the opening <body> tag is:

<xml id="phonebook" src="phonebook.xml"></xml>

This line binds the XML document to the HTML document.

The <xml> element contains the attribute of id="phonebook". The value for the id attribute can be any string.

The <xml> element also contains the attribute of src="phonebook.xml". The value for the src attribute is the filename of the xml document.

The <table> element also contains the opening <thead> and closing <thead> element. If this element is not included, the data binding will not function.

The <table> element contains the attribute of datasrc="#phonebook". This value matches the value for the id attribute within the <xml> element. The value is preceded by the pound sign ( # ).

<table datasrc="#phonebook" border="1" cellpadding="3">

The <span> element contains the attribute of datafld. The value for datafld will match an element from the XML document. The content of the XML element will be contained within the <span> element.

<span datafld="firstname">

Note that even though the table element only contains one row for the data from the XML file, more rows are automatically added to accomodate all the data within the XML file.

The resulting HTML document

2. Binding a specified number of XML elements to a single HTML page

The markup in this html document adds the id and datapagesize attributes to the <table> element. The value for id will be the same as it is stated for the <xml> element. The value for datapagesize is an integer up to the number of displays that are wanted for a single html page.

The HTML document markup

Note in the resulting document that only 4 of the 10 addresses have been returned.

The resulting HTML document

3. Binding only one XML element to a single HTML page

In this example the datasrc attribute has been added to a separate <span> element. This value matches the value for the id attribute within the <xml> element. The value is preceded by the pound sign ( # ).

<span datasrc="#phonebook" datafld="firstname">

4. Moving through one display result at a time

This example is exactly like the previous example (#4) except that the <button> element has been added to the HTML document so that movement through each result is possible.

Note that each <button> element carries the same value that the xml element's attribute, id, states for its onclick function.

<xml id="phonebook" src="phonebook.xml">

onclick ="phonebook.recordset.movefirst()"

The HTML document markup

The resulting HTML document

5. Moving through one page of results at a time

Note that in this example, the <xml> element's id attribute carries a value of phonebook.

<xml id="phonebook" src="phonebook.xml"></xml>

The <table> element, however, must use a different value for its id attribute. In this example it is pagebypage. Note also, that the datapagesize attribute is also stated.

<table datasrc="#phonebook" id="pagebypage" datapagesize="3" border="1" cellpadding="3">

Note that each <button> element carries the same value that the <table> element's attribute, id, states for its onclick function.

onclick="pagebypage.lastPage()"

The HTML document markup

The resulting HTML document

All materials, tutorials and content are copyrighted by HTMLTeacher.Com.
Any use of any material, tutorials and/or content provided by this site is prohibited without expressed written consent of the author.