Updating XML Data Islands with IE9

StackOverflow https://stackoverflow.com/questions/11552366

Question

I'm working on an internal legacy website that is IE6 only. IE8/9 fails due to the use of XML Data Island specific scripting. The goal is to modify the site to be viewable on IE9. Other browsers are not a concern.

There are thousands of pages and upwards of 100+ JS files, so the other goal here is not re-write everything, but to fix what we can to enable the site for IE9.

I'm not entirely sure I'm doing this correctly, but the following is an example of a typical page layout. I've condensed it down into a small test to demonstrate what is working and what is not working.

Works

  • the initial binding the XML Data Islands.
  • when one XML element is updated, the same XML element is updated elsewhere on the page (modify the value of one of the two input fields and the other input field will follow suite when it loses focus).

Not Working

  • retrieving the values of the XML Data Island after a value has changed (at least how I've attempted).
  • keeping the fields that are bound to the XML Data Islands in sync with embedded XML.

Steps to Reproduce Issues

  1. (ok) click the view message button and the value from the embedded xml is correctly displayed.
  2. (ok) change a value in one of the input fields; the other is correctly updated.
  3. (not ok) click the view message button again; the new value of the message is not updated.
  4. (1/2 ok) click the modify message button and the XML is updated; but the input fields that are bound to the XML Data Island are not updated.
  5. (ok) click the view message button again; the script that updated value of the XML is correctly shown.

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title>Data Islands</title>

    <xml id="ResultsIsland">
        <result>
            <msg>Initial Message</msg>
        </result>
    </xml>

    <script type="text/javascript">
        function modifyDataIsland() {
            var dataIsland = document.getElementById("ResultsIsland");
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(dataIsland.innerHTML);

            var xmlRoot = xmlDoc.documentElement;
            xmlRoot.getElementsByTagName("msg")[0].text = new Date();
            dataIsland.innerHTML = xmlDoc.xml;

            alert("msg element updated to: " + xmlRoot.getElementsByTagName("msg")[0].text);
        }

        function viewMessage() {
            var d = document.getElementById("Message");
            var dataIsland = document.getElementById("ResultsIsland");
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(dataIsland.innerHTML);
            d.innerHTML = xmlDoc.getElementsByTagName("msg")[0].text;
        }
    </script>
</head>
<body style="margin: 100px;">

<div style="margin: 10px;">
    <button onclick="viewMessage();">view message</button>
    message is: <span id="Message"/>
</div>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg" />
        </td>
    </tr>
</table>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg" />
        </td>
    </tr>
</table>

<div style="margin: 10px;">
    <button onclick="modifyDataIsland();">modify message</button>
</div>

</body>
</html>

Question: Is it possible to update an XML Data Island with IE9 so that changes are reflected in both the embedded XML and the bound data fields?

Was it helpful?

Solution

After various testing, I've found that forcing IE9 into quirks mode allows IE9 to play nicely with XML Data Islands. And this allows you to use IE5/6 scripting for the XML Data Islands.

Here is the revised sample that works in IE9:

<!--
    This comment and the following DocType forces IE9
    into quirks mode which is needed for the XML Data Islands
-->
<!DOCTYPE HTML>

<html>
<head>
    <title>Data Islands</title>

    <xml id="ResultsIsland">
        <result>
            <msg>Message</msg>
        </result>
    </xml>

    <script type="text/javascript">
        function modifyDataIsland() {
            var xml = document.all("ResultsIsland").XMLDocument;
            xml.getElementsByTagName("msg")[0].text = new Date();
            alert('msg element updated to: ' + xml.getElementsByTagName("msg")[0].text);
        }

        function viewMessage() {
            var xml = document.all("ResultsIsland").XMLDocument;
            document.getElementById("Message").innerHTML = xml.getElementsByTagName("msg")[0].text;
        }
    </script>
</head>
<body style="margin: 100px;">

<p style="margin: 30px 10px;">
   Document is in
    <strong>
    <script type="text/javascript">document.write(document.compatMode)</script>
    </strong> mode.
</p>

<div style="margin: 10px;">
    <button onclick="viewMessage();">view message</button>
    message is: <span id="Message"></span>
</div>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg"/>
        </td>
    </tr>
</table>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg"/>
        </td>
    </tr>
</table>

<div style="margin: 10px;">
    <button onclick="modifyDataIsland();">modify message</button>
</div>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top