How to display XSLT in IE 8 and Chrome with javascript and three XML files?

Question

Internet Explorer 8: Google Chrome version 13: Javascript: XSLT: XML:

In IE 8 nothing popluates but opera and firefox are just fine. When I load the javascript in Chrome 13.1 the first xml doc shows up and the 2nd and 3rd do not show up at all. I am referencing the three xml files in the xslt file. The javascript is from w3shools. How can I get these to populate in IE and Chrome?

Files:
load_xml_javascript.html
delivery_and_activity.xsl
delivery.xml
activity.xml
click_through.xml

load_xml_javascript.html

<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml=loadXMLDoc("delivery.xml");
xsl=loadXMLDoc("delivery_activity_clickthrough.xsl");
// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById("example").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onLoad="displayResult()">
<div id="example" />
</body>
</html>

delivery_and_activity.xsl

<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="delivery.xml" -->
<!DOCTYPE xsl:stylesheet  [
    <!ENTITY nbsp   "&#160;">
    <!ENTITY copy   "&#169;">
    <!ENTITY reg    "&#174;">
    <!ENTITY trade  "&#8482;">
    <!ENTITY mdash  "&#8212;">
    <!ENTITY ldquo  "&#8220;">
    <!ENTITY rdquo  "&#8221;"> 
    <!ENTITY pound  "&#163;">
    <!ENTITY yen    "&#165;">
    <!ENTITY euro   "&#8364;">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-

system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Delivery Summary</title>
    </head>
    <body>
    <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Delivery Summary</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Attempted to Deliver</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
        <xsl:for-each select="DELIVERY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TITLE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="ATTEMPTED"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
    <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Activity Summary</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
         <xsl:for-each select="document('activity.xml')/ACTIVITY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TITLE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="ATTEMPTED"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
        <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Click Through Report</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
         <xsl:for-each select="document('click_through.xml')/ACTIVITY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="URL"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="UNIQUE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

delivery.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<DELIVERY>
    <SUMMARY>
        <TITLE>Attempted to deliver</TITLE>
        <ATTEMPTED>100</ATTEMPTED>
        <TOTAL>21256</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Hard Bounces</TITLE>
        <ATTEMPTED>.68</ATTEMPTED>
        <TOTAL>145</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Soft Bounces</TITLE>
        <ATTEMPTED>4.48</ATTEMPTED>
        <TOTAL>953</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Successfully delivered</TITLE>
        <ATTEMPTED>94.8</ATTEMPTED>
        <TOTAL>20158</TOTAL>
    </SUMMARY>
</DELIVERY>

activity.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
    <SUMMARY>
        <TITLE>Opened</TITLE>
        <ATTEMPTED>22.96</ATTEMPTED>
        <TOTAL>4629</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Clicked Through</TITLE>
        <ATTEMPTED>4.10</ATTEMPTED>
        <TOTAL>829</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Replied</TITLE>
        <ATTEMPTED>0.12</ATTEMPTED>
        <TOTAL>24</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Unsubscribed</TITLE>
        <ATTEMPTED>0.25</ATTEMPTED>
        <TOTAL>51</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>Forwarded</TITLE>
        <ATTEMPTED>0.00</ATTEMPTED>
        <TOTAL>0</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>Subscribed</TITLE>
        <ATTEMPTED>0.00</ATTEMPTED>
        <TOTAL>0.00</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>SpamComplaints</TITLE>
        <ATTEMPTED>0.3</ATTEMPTED>
        <TOTAL>6</TOTAL>
    </SUMMARY>
</ACTIVITY>

click_through.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
    <SUMMARY>
        <URL>navbar weddings</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <URL>navbar honeymoon</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <URL>submit rfp</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
</ACTIVITY>

score 4 · Accepted Answer · edited May 23 '17 at 09:59

As alternative approach you could use simpler, non-JavaScript, browser's client side XSL tranformation, without load_xml_javascript.html file, just add into delivery.xml (just below XML declaration) following line:

<?xml-stylesheet type="text/xsl" href="delivery_and_activity.xsl"?>

Tested (displaying three tables) on:

Internet Explorer 8
Firefox 6
Opera 11.50
Google Chrome 13, however for local (without web server) transformations you need run browser it with --allow-file-access-from-files switch
Safari 5.1

For JavaScript based solution tables (second and third) are empty in Google Chrome 13 because document() function doesn't work properly under Webkit engine. Take a look at:

For Internet Explorer 8 (as well as 9) your simplified initial code looks:

function loadXMLDoc(dname)
{
    var xhttp;
    if (window.XMLHttpRequest)
        xhttp = new XMLHttpRequest();

    xhttp.open("GET", dname, false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    var xml = loadXMLDoc("delivery.xml");
    var xsl = loadXMLDoc("delivery_and_activity.xsl");
    if (window.ActiveXObject)
    {
        var output = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = output;
    }
}

Use F12 to debug it, you should see error message (de facto the same issue as in here):

Access is denied

However you could try following code instead:

function loadXMLDoc(filePath)
{
    var xmlDoc;
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.validateOnParse = false;
        xmlDoc.load(filePath);
    }
    return xmlDoc;
}
function displayResult()
{
    var xml = loadXMLDoc("delivery.xml");
    var xsl = loadXMLDoc("delivery_and_activity.xsl");
    if (window.ActiveXObject)
    {
        var output = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = output;
    }
}

To display page properly cut these attributes:

doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

As you see it's much easier to use browser's native XSL transformation, rather than JavaScript based.

Thanks alot Grzegorz. The senario is that a new xml file (report) is being dumped on the server every 72 hours. I have an html page (with a header footer sidenav body) that needs to update (according to the new xml doc) on the fly in the body area. If I where to use the browsers transformation it would render just the xml and xslt? I need to include the header footer & sidenav. This was why I wanted to use the javascript method so I could put a "wrapper" around the data. — mikenichols, Aug 23 '11 at 18:03
@mikenichols: That's right. It would render just xml and xsl, but you could add your header, footer, etc. (even some javascript cde) into xsl stylesheet. Also consider use of server-side XSLT, where browser gets just final html. — Grzegorz Szpetkowski, Aug 23 '11 at 20:11
Server side xslt sounds very good. I will look into that. Thank you very much Grzegorz. — mikenichols, Aug 24 '11 at 18:13
@mikenichols: You're welcome. You might consider accepting this answer (by clicking attached white mark). — Grzegorz Szpetkowski, Aug 24 '11 at 18:30
Hi Grzegorz I posted an ajax question here maybe you have some insight http://stackoverflow.com/questions/7198702/how-to-populate-xml-doc-in-div-from-another-div-like-an-iframe-using-ajax — mikenichols, Aug 26 '11 at 00:18

score 0 · Answer 2 · answered Aug 23 '11 at 00:06

0

IE has never supported XHTML till IE9. IE is always a problem and you will have further problems in areas that require MSXML for its non-standard stuff. Sorry I can't be more specific or helpful since it's been a year since I've worked in this realm.

answered Aug 23 '11 at 00:06

Rob

14,746
28
47
65

Ya IE is a pain in the butt. Thanks for the feedback Rob. – mikenichols Aug 24 '11 at 18:14

How to display XSLT in IE 8 and Chrome with javascript and three XML files?

2 Answers2

Linked