javascriptxmlinternet-explorerxsltxmldom

JavaScript XMLDOM XML XSL Internet explorer - I cant display transformed file in the browser

I am trying to transform XML file with XSL using JavaScript and XMLDOM with MS Internet Explorer, but i cant make it work. In the developer tool on IE there is no errors, but no file is displayed. I have search websites like w3c for several hours, but I cant find the answer.

This is the code that I am supposed to use:

<html>
<body>
    <script type=“text/javascript”>
        // Load the XML document
        var xml = new ActiveXObject(“Microsoft.XMLDOM”)
        xml.async = false
        xml.load(“myLibrary.xml”)
        // Load the XSL document
        var xsl = new ActiveXObject(“Microsoft.XMLDOM”)
        xsl.async = false
        xsl.load(“libraryStyle_v2.xsl”)
        //Do the transformation
        document.write(xml.transformNode(xsl))
    </script>
</body>
</html>

And here is the code that I am using:

<!DOCTYPE html>
<html>
<body>
    <script type=“text/javascript”>
        // Load the XML document
        var xml = new ActiveXObject(“Microsoft.XMLDOM”)
        xml.async = false
        xml.load(“travelDiaries.xml”)
        // Load the XSL document
        var xsl = new ActiveXObject(“Microsoft.XMLDOM”)
        xsl.async = false
        xsl.load(“travelDiaries.xsl”)
        //Do the transformation
        document.write(xml.transformNode(xsl))
    </script>
</body>
</html>

I'm not sure what I am doing wrong. I shouldn't be using different code than the one above (apart from some small changes)

here is my XML file code:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="travelDiaries.xsl" type="text/xsl"?>
<diaries>
    <diary name='Wojciech'>
          <entry date='2020/06/12' title='Poland'>
            <location>Poland</location>
            <description>Trip to see the, family and friends in a home town</description>
            <img></img>
         </entry>
    </diary>

    <diary name='Karolina'>
        <entry date='2018/04/12' title='Poland'>
            <location>Poland</location>
            <description>Trip for site visiting, visiting a Capital city of Poland - Warsaw </description>
            <img></img>
        </entry>
    </diary>

     <diary name='Kuba'>
          <entry date='2019/03/02' title='Czech republic'>
            <location>Czech republic</location>
            <description>Visiting the Old Praque with friends, seeing most popular sites</description>
            <img></img>
         </entry>
    </diary>

     <diary name='Kevin'>
          <entry date='2020/11/08' title='Usa'>
            <location>Usa</location>
            <description>Traveling around different states, meeting people and learning about the culture</description>
            <img></img>
         </entry>
    </diary>
</diaries>

and my XSL code:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/diaries">
        <html>
            <body>
                <table border="5">
                    <tr bgcolor="lawngreen">
                        <th>Date</th>
                        <th>Location</th>
                        <th>Description</th>
                        <th>Image</th>
                    </tr>
                <xsl:for-each select="diary/entry">
                 <xsl:sort select="@date" order="descending"/>
                        <tr>
                            <td>
                                <xsl:value-of select="@date"/>
                            </td>
                            <td>
                                <xsl:value-of select="location"/>
                            </td>
                            <td>
                                <xsl:value-of select="description"/>
                            </td>
                            <td>
                                <img border="1" width="100px" height="100px">
                                    <xsl:attribute name="src">
                                <xsl:value-of select="img"/>
                                    </xsl:attribute>
                                </img>
                            </td>
                        </tr>
                </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
Solution

  • Based on your xml file content, I modified the XML file and XSLT file as below:

    XML file (change the extension from .xsl to .xslt):

    <?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="travelDiaries.xslt" type="text/xsl"?>

    travelDiaries.xslt file:

    <?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <h2>Data collection</h2>
        <table border="1">
          <tr bgcolor="#9acd32">
            <th>Date</th>
            <th>Location</th>
            <th>Description</th>
          </tr>
          <xsl:for-each select="diaries/diary">
            <xsl:sort select="entry/@date" order="descending"/>
            <tr>
              <td>
                <xsl:value-of select="entry/@date"/>
              </td>
              <td>
                <xsl:value-of select="entry/location"/>
              </td>
              <td>
                <xsl:value-of select="entry/description"/>
              </td> 
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

    Then, in the Html page, if using IE browser, we could use the ActiveXObject object and the transform() method to transform the XML document, if using Edge or Chrome browser, we could use the XSLTProcessor object to transform the XML document (check the XSLTProcessor Basic Example). Please check the following sample code:

    Html page:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="example">

    </div>
    <script>  
        var xml;
        var xsl;

        function loadXMLDoc(filename) {
            if (window.ActiveXObject || "ActiveXObject" in window) {
                xhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } else {
                xhttp = new XMLHttpRequest();
            }
            xhttp.open("GET", filename, false);
            xhttp.send("");
            return xhttp.responseXML;
        }


        if (window.ActiveXObject || "ActiveXObject" in window) {
            ie();
        } else {

            xml = loadXMLDoc("XMLPage.xml");
            xsl = loadXMLDoc("travelDiaries.xslt");

            if (typeof XSLTProcessor !== 'undefined') {
                xsltProcessor = new XSLTProcessor();
                xsltProcessor.importStylesheet(xsl);
                resultDocument = xsltProcessor.transformToDocument(xml, document);

                var serializer = new XMLSerializer();
                var transformed = serializer.serializeToString(resultDocument.documentElement);

                //console.log(transformed);
                document.getElementById("example").innerHTML = transformed;
            }
        }

        // https://msdn.microsoft.com/en-us/library/ms753809(v=vs.85).aspx
        function ie() {

            var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
            var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
            var xslProc;
            xslDoc.async = false;
            xslDoc.load("travelDiaries.xslt");
            if (xslDoc.parseError.errorCode != 0) {
                var myErr = xslDoc.parseError;
                alert("You have error " + myErr.reason);
            } else {
                xslt.stylesheet = xslDoc;
                var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
                xmlDoc.async = false;
                xmlDoc.load("XMLPage.xml");
                if (xmlDoc.parseError.errorCode != 0) {
                    var myErr = xmlDoc.parseError;
                    alert("You have error " + myErr.reason);
                } else {
                    xslProc = xslt.createProcessor();
                    xslProc.input = xmlDoc;
                    xslProc.addParameter("param1", "Hello");
                    xslProc.transform();
                    //console.log(result);
                    var result = xslProc.output;       
                    if (result !== undefined) {
                        document.getElementById("example").innerHTML = result;
                    }
                }
            }
        }
    </script>
</body>
</html>

    the IE 11 output:

    enter image description here