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

<xmlid="XMLClientEvents">
    <clientevents>
        <openmodaleventid="openModal1" setpgmode="Mode1">
            <height>200</height>
            <width>400</width>
            <arguments>
                <argumentrequired="true" name="GUID">
                    </argument>
            </arguments>
            </openmodalevent>
            <openmodaleventid="openModal2" setpgmode="Mode2">
                <height>300</height>
                <width>500</width>
                </openmodalevent>
                <openmodaleventid="openModal3" setpgmode="Mode3">
                    <height>600</height>
                    <width>800</width>
                    <arguments>
                        <argumentrequired="true" name="GUID">
                            </argument>
               </arguments>
              </openmodalevent>
    </clientevents>
    </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

// 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 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.