Introduction to IE Data Binding - DHTML Lab | 7

Binding Data to HTML Elements

IE 4.0 and above support four binding-related HTML tag attributes: DATASRC, DATAFLD, DATAFORMATAS, and DATAPAGESIZE. These attributes allow HTML elements, referred to as data consumers, to bind and display data from DSOs within the page.

Firstly, DATASRC is used to specify which DSO the data is coming from. This is the same value as the ID specified in the DSO preceded by a hash, # (just like we point to client image map information from an image's USEMAP attribute.) Having specified the DSO, we now need to specify the column containing the bound data. This is done using the DATAFLD attribute, as specified in the delimited file's column names. Setting DATAFORMATAS to HTML (rather than the default TEXT) gives us the facility to include HTML formatting information in the column value. The final attribute, DATAPAGESIZE, specifies how many records are displayed in a table at once.

In the DSO on the previous page the ID was tdcStaff, so to bind an <IMG&gt or <SPAN> tag the syntax is simply:

<IMG DATASRC="#tdcStaff" DATAFLD="Picture">
<SPAN DATASRC="#tdcStaff" DATAFLD="FirstName"></SPAN>

You're probably wondering what other HTML elements can be data bound. The following tags can all be data bound:

A, APPLET, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT(button), INPUT(checkbox), INPUT(hidden), INPUT(image), INPUT(radio), INPUT(reset), INPUT(submit), INPUT(text), LABEL, MARQUEE, OBJECT, PARAM, SELECT, SPAN, TABLE, TEXTAREA

On the next page, we have a fully working example with multiple data bound tags.

Produced by Ian McArdle and Paul Thomas and

URL: https://www.webreference.com/dhtml/column39/5.html