RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Make Data Islands Work in All Browsers : Page 2

XML Data Islands and XML Data Sources aren't a new idea—and they are no longer exclusive to Internet Explorer, either. Here's how to use data islands generically, without getting locked in to any one vendor's implementation, and make your data-centric Web pages work across all modern browsers.

Fitting in with Standards
To be standards compliant, old-fashioned "Tag Soup" HTML won't do. Here are some constraints you must meet to include data islands in a standards-aware page:

  • Use a proper HTML standard DOCTYPE, such as HTML 4.01 Strict.
  • The HTML standard doesn't prevent addition of strange new elements (tags) to an HTML document, so it's perfectly OK to add an <xml> tag (or a similarly named tag), and its children; however, the standard does prevent you from adding those elements to the document's DTD. So such elements have to remain anonymous. You can't, for example, use <address> instead of <location> because <address> already has HTML semantics.
  • Don't (as is sometimes done with IE) embed an <?xml?> processing instruction in the data island. In the first place, HTML isn't XML, and in the second place, the client browser may ignore any such processing instruction, because it's a user-agent hint only.
  • Don't place the <xml> tag in the <head> section of the document, because it's not about the document.
  • Don't use IE's innerHTML technique. Although it's handy, it's also non standard.
  • Any standards-compliant Web browser will try to render the contents of the XML data island as plain text: In other words, you'll see "Nigel McFarlane Somewhere in Cyberspace." That's not wanted, so use a CSS "display: none" style rule to prevent the XML content from rendering.
  • Finally, the solution relies on JavaScript and CSS support. If that's not present, then you should use a fallback technique that avoids datasources in the first place. I'll leave an explanation of graceful fallback for another day; but it's not hard to add.
You want to do two things with data islands: display data-driven reports, and fill in data-driven forms.

Preparing The Test Data
Here's a simple HTML page to experiment with. It contains one data source and two binding locations.

        #who { display : none; }
       <script src="islands.js"></script>
       <p id="who">
           <name>Nigel McFarlane</name>
           <location>Somewhere in Cyberspace</location>
           <name>A. Russell Jones</name>
           <location>DevX Editorial</location>
           <name>J. Random Hacker</name>
       <h3>Reviewers of this article <h3>
       <ul datasource="who">
         <li><span datafield="name"></span>
               , Location:
             <span datafield="location"></span>
       <table border="1" datasource="who">
           <td><input type="text" datafield="name">
           <td><input type="text" datafield="location">
In the document head there's a single style that hides the island from the user and an included script that does all the work. The body of the document contains three important chunks of code. First, the data island itself, specified with a <p> tag. The data island contains three <contributor> records, each with two child (name and location) fields. The example uses a <p> tag instead of an <xml> tag because of IE's poor DOM support: Anything inside an <xml> tag, or inside any tag that's not an HTML tag isn't reflected into the DOM by IE. That means you can't access any such data using a script. Never fear, the humble <p> tag (or <span> or <div>) will do instead.

The other two interesting chunks of code are at the bottom; there are two different tags holding a datasource attribute, and thus two places where the data island content will be folded into the main page content. The datafield attribute says what piece of data to add in. Both datasource and datafield are custom attributes not specified in HTML nor in the Microsoft data island spec. I've made them up, which is legal in strict HTML 4.01.

Even this small amount of markup exceeds the limitations of the Microsoft solution. Here we're folding data into an unordered list and into form elements embedded in a table. Both of those examples are difficult or impossible to do with the Microsoft solution.

By itself, this HTML content does very little. You need to add a little script to manipulate the data.

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