Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Displaying XML Data Islands with JavaScript-4 : Page 4


advertisement
Bind Data Fields to the Data Island
Binding data fields to the data island is also relatively simple. Binding is the term for creating an automatic connection between a data source and a data consumer. To bind the source to the consumer, you must specify the name of the source object and a column name. A bound data consumer's contents update automatically as you move through the source data. For this display-only application, span tags are appropriate. Just add two new attributes to the <span> element, for example:

<span dataSrc="#data" dataFld="lastName"></span>

Figure 1. Binding Fields: The dataSrc and dataFld attributes in the span tags embedded in the table cells bind them to the individual fields in the XML document. When the page loads, IE parses the XML data, retrieves the field values from the first employee element, and fills the span tags with the values.
The dataSrc attribute indicates which data island contains the data for the <span> tag, and the dataFld attribute contains the name of the specific data field containing the <span> element data. Note that you set the dataSrc attribute value to the <xml> element's id attribute preceded by the pound (#) sign.

That's it! IE5 takes care of the internal plumbing required to synchronize the XML DSO and the <span> element. When the page loads, the text fields will display the indicated data field of the first record (node) in the XML data tree.

Here's the code that binds the fields of the data island in the Employee Directory (see Figure 1):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XML Data Binding Demo</title> <script src="xmlNav.js"> </script> </head> <body> <xml id="data" src="data.xml"></xml> <h2 style="color: navy; font-family: Verdana,sans-serif"> Employee Directory </h2> <table border="0" style="font: 10pt Verdana,sans-serif; color: navy; background-color: rgb(255,255,200)" cellpadding="5"> <tr> <td>Last Name </td> <td> <span style="background: white; width:150; border: inset; border-width:1" dataSrc="#data" dataFld="lastName"></span> </td> <td>FirstName </td> <td><span style="background: white; width:150; border: inset; border-width:1" dataSrc="#data" dataFld="firstName"></span> </td> </tr> <tr> <td>Title </td> <td><span style="background: white; width:150; border: inset; border-width:1" dataSrc="#data" dataFld="title"></span> </td> <td>Department </td> <td> <span style="background: white; width:150; border: inset; border-width:1" dataSrc="#data" dataFld="department"></span> </td> </tr> <tr> <td>Extension </td> <td> <span style="background: white; width:150; border: inset; border-width:1" dataSrc="#data" dataFld="extension"></span> </td> <td> <input type="button" value="|<" onClick="first()"> </input> <input type="button" value="<" onClick="previous()"> </input> <input type="button" value=">" onClick="next()"> </input> <input type="button" value=">|" onClick="last()"> </input> </td> </tr> </table> </body> </html>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date