Post
Ask Question

Processing Legacy “Data Islands” with JQuery

“Data Islands” is an obsolete Microsoft technology that is not supported by any modern browser. It was introduced with IE5 and abandoned after IE9. It was never supported by any other browser.

MSDN Article on Data Island obsolescence.

XML is simply put onto a page, and older IE browsers parse it into an XMLDocument object. This object is then queried with xPath using Javascript.

The following is the sample XML Data Island

  1. <xmlid="XMLClientEvents">  
  2.     <clientevents>  
  3.         <openmodaleventid="openModal1" setpgmode="Mode1">  
  4.             <height>200</height>  
  5.             <width>400</width>  
  6.             <arguments>  
  7.                 <argumentrequired="true" name="GUID">  
  8.                     </argument>  
  9.             </arguments>  
  10.             </openmodalevent>  
  11.             <openmodaleventid="openModal2" setpgmode="Mode2">  
  12.                 <height>300</height>  
  13.                 <width>500</width>  
  14.                 </openmodalevent>  
  15.                 <openmodaleventid="openModal3" setpgmode="Mode3">  
  16.                     <height>600</height>  
  17.                     <width>800</width>  
  18.                     <arguments>  
  19.                         <argumentrequired="true" name="GUID">  
  20.                             </argument>  
  21.                </arguments>  
  22.               </openmodalevent>  
  23.     </clientevents>  
  24.     </xml>  
In the modern browser this element is parsed into an HTMLUnknownObject, which cannot be queried by the above means.

The preferred method to make this structure compatible with modern browsers is to rewrite it from the server side to provide data

If rewriting the server side is not possible, you can use jQuery gain access to the XML structure inside the HTMLUnknownObject.

jQuery to extract data from the above XML document
  1. // JavaScript source code  
  2. function ProcessXML()   
  3. {  
  4.     //call function to get the node object for eventId  
  5.     var $targetNode = getTargetNode('openModal1');  
  6.     //use find() to navigate the node  
  7.     var height = $targetNode.find('height').text();  
  8.     var width = $targetNode.find('width').text();  
  9.     var newPageMode = $targetNode.attr('setpgmode');  
  10.     alert("modal 1: " + height + " x " + width + " " + newPageMode);  
  11.     $targetNode = getTargetNode('openModal2');  
  12.     //use find() to navigate the node  
  13.     height = $targetNode.find('height').text();  
  14.     width = $targetNode.find('width').text();  
  15.     newPageMode = $targetNode.attr('setpgmode');  
  16.     alert("modal 2: " + height + " x " + width + " " + newPageMode);  
  17.     $targetNode = getTargetNode('openModal3');  
  18.     //use find() to navigate the node  
  19.     height = $targetNode.find('height').text();  
  20.     width = $targetNode.find('width').text();  
  21.     newPageMode = $targetNode.attr('setpgmode');  
  22.     alert("modal 3: " + height + " x " + width + " " + newPageMode);  
  23. }  
  24.   
  25. function getTargetNode(eventId)  
  26. {  
  27.     //parse() the innerHTML  
  28.     var xmlDoc = $.parseXML(document.getElementById("XMLClientEvents").innerHTML);  
  29.     //Convert to jQuery object  
  30.     var $xmlObject = $(xmlDoc);  
  31.     //find the node based on argument  
  32.     return $xmlObject.find('clientevents').find('openmodalevent[id=' + eventId + ']');  
  33. }  
Using jQuery gives us some browser independence when faced with this legacy browser-specific technology.

For a demo(not using alerts)see this Fiddle – tested on IE11 and Chrome 47.0.2526.106

https://developer.mozilla.org/en/docs/Using_XML_Data_Islands_in_Mozilla,

See this article on converting Data Island to Data Blocks.