Client-side linking (data-binding) between XML and HTML

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, July 2008.

Linking between XML and HTML on the client browser is not particularly difficult. The data is stored in an XML structure (data store), and linked to HTML elements for dynamic use in a rendered HTML display.

XML data store

XML can be used to store nearly anything digital, however, it is most practical for database records and tabular data such as lists and tables. The XML provides a meaningful structure to store the data within, and a semantic system for labelling and classification of that data.

The XML could be a separate file to the HTML file, or could be embedded as an XML data island within the HTML file. In either case, the XML data is stored separate from the HTML presentation of the data. When the data is displayed in the HTML on the client browser, only the XML data values are displayed, not the XML structure or schema.

The XML data store is linked to the HTML with a single XML tag placed in the HTML body section. For example, the following is the link used in the Word Of The Week topic:

<xml id="WeeklyWord" src="WordOfTheWeek.xml"></xml>

The XML data store is referenced using the ID, and linked to the HTML, as declared in the XML tag.

Data-binding

The HTML elements which display the XML data values are dynamically linked to the XML data store through wizardry commonly known as data-binding. The display element is bound to the data store, so that any change in one is reflected in the other. This allows for the possibility of a user being able to change the displayed data in HTML, and have the changes stored in the bound XML data store.

Several HTML display elements are usually used in unison (grouped together) to provide navigation through the records in the data store, and most commonly displaying the data in one of three common arrangements:

• sequentially—one complete record at a time; or
• selectively—in lists of one item type at a time; or
• simultaneously—in tables of several item types showing more than one record at the same time.

All of the HTML display elements in a group are linked (bound) to the same data store through the use of their data source parameter "datasrc". For example, see that the "datasrc" parameter (as highlighted) in the following example spans are set to the same data source value as each other:

<span id="HeadWord" datafld="HeadWord" datasrc="#WeeklyWord">Headword 1</span>
<span id="PartOfSpeech1" datafld="PartOfSpeech1" datasrc="#WeeklyWord">Part of speech 1</span>
<span id="Definition1" datafld="Definition1" datasrc="#WeeklyWord">Definition 1</span>

The data field holding the data value within the data source is set in the "datafld" parameter for each HTML display element. There is usually only one link to each data field on an HTML page, as this data is unique for each record. See that in the example above, the "datafld" parameter for each span data link is set to a different data field value. Each HTML display element is usually bound to a different data field within the same data store.

Navigating

As previously mentioned above in Data-binding, the navigation through the records of the data store is usually performed by the grouped navigation links, which act upon the current record being accessed. They can move the current record position in the data store forward and backward from first to last and everything in between. Each data-bound HTML display element displays the value of the field it's bound to for the current record position in the data store. The links at the top of Word Of The Week demonstrate this behaviour and are replicated here:

|< - << - >> - >|

The HTML source for the links looks like this:

<a href="JavaScript:onclick=WeeklyWord.recordset.moveFirst();" title="First">|&lt;</a> -
<a href="JavaScript:onclick=WeeklyWord.recordset.movePrevious();" title="Previous">&lt;&lt;</a> -
<a href="JavaScript:onclick=WeeklyWord.recordset.moveNext();" title="Next">&gt;&gt;</a> -
<a href="JavaScript:onclick=WeeklyWord.recordset.moveLast();" title="Last">&gt;|</a></p>

 

From the user's viewpoint, they don't need to know and as likely don't particularly care how this works behind the scenes, and nor should they. If you set it up properly, and test it thoroughly, they shouldn't ever have a problem with client-side linking (data-binding) between XML data stores and HTML displays.

 

 

[Provide example of XML data store structure] 

[Provide examples of linking to external XML file and embedded XML data islands]

[Explain differences between IE and Mozilla/Gecko-based browser data-binding behaviour]

[Explain ADODB connectivity and recordset structure]

[Explain and demonstrate XMLDOM access using JS]

 

 

 

Who am I? > find out more