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 Internet Explorer 5 and abandoned after Internet Explorer 9. It was never supported by any other browser.

MSDN Article on Data Island obsolescence

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

The following is a sample XML Data Island:

<xml id="XMLClientEvents">
  <clientevents>
    <openmodalevent id="openModal1" setpgmode="Mode1">
      <height>200</height>
      <width>400</width>
      <arguments>
        <argument required="true" name="GUID"></argument>
      </arguments>
    </openmodalevent>
    <openmodalevent id="openModal2" setpgmode="Mode2">
      <height>300</height>
      <width>500</width>
    </openmodalevent>
    <openmodalevent id="openModal3" setpgmode="Mode3">
      <height>600</height>
      <width>800</width>
      <arguments>
        <argument required="true" name="GUID">
        </argument>
      </arguments>
    </openmodalevent>
  </clientevents>
</xml>

In the modern browser, this element is parsed into an HTMLUnknownObject, which cannot be easily queried by JavaScript directly.

The preferred method to make this structure compatible with modern browsers is to rewrite it from the server side to provide HTML 5 data blocks. See this article on converting Data Island to Data Blocks.

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

jQuery to extract data from the above XML document.

// JavaScript source code
function ProcessXML() {
    //call function to get the node object for eventId
    var $targetNode = getTargetNode('openModal1');
    //use find() to navigate the node
    var height = $targetNode.find('height').text();
    var width = $targetNode.find('width').text();
    var newPageMode = $targetNode.attr('setpgmode');
    alert("modal 1: " + height + " x " + width + " " + newPageMode);
    $targetNode = getTargetNode('openModal2');
    //use find() to navigate the node
    height = $targetNode.find('height').text();
    width = $targetNode.find('width').text();
    newPageMode = $targetNode.attr('setpgmode');
    alert("modal 2: " + height + " x " + width + " " + newPageMode);
    $targetNode = getTargetNode('openModal3');
    //use find() to navigate the node
    height = $targetNode.find('height').text();
    width = $targetNode.find('width').text();
    newPageMode = $targetNode.attr('setpgmode');
    alert("modal 3: " + height + " x " + width + " " + newPageMode);
}

function getTargetNode(eventId) {
    //parse() the innerHTML
    var xmlDoc = $.parseXML(document.getElementById("XMLClientEvents").innerHTML);
    //Convert to jQuery object
    var $xmlObject = $(xmlDoc);
    //find the node based on argument
    return $xmlObject.find('clientevents').find('openmodalevent[id=' + eventId + ']');
}

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 Internet Explorer 11 and Chrome 47.0.2526.106.