I am trying to transform a XSLT using Javascript and trying to get it to work on Both Chrome and IE. Entry page is a.html. It's working fine in IE (both native/compatibility mode) but doesn't work in Chrome correctly i.e. dropdown is not created with options.
In chrome, however, if I open data.xml which has:
<?xml-stylesheet type="text/xsl" href="render.xslt" ?>
directly in chrome, it is transformed perfectly fine. But if I try to do that same using XSLTProcessor, it doesn't work. Specifically, the document function doesn't work. Could you please help?
My code is as follows.
Javascript:
var MSXML2_DOMDocument_6 = "MSXML2.DOMDocument.6.0";
function tranform(xml, xsl) {
if (window.ActiveXObject || "ActiveXObject" in window) {
var xmlSerializer = new XMLSerializer();
var xmlString = xmlSerializer.serializeToString(xml);
var xslString = xmlSerializer.serializeToString(xsl);
var xsl = new ActiveXObject(MSXML2_DOMDocument_6);
xsl.setProperty("AllowXsltScript", true);
xsl.setProperty("AllowDocumentFunction", true);
xsl.resolveExternals = true;
xsl.async = false;
xsl.loadXML(xslString);
var xml = new ActiveXObject(MSXML2_DOMDocument_6);
xml.resolveExternals = true;
xml.preserveWhiteSpace = true;
xml.async = false;
xml.loadXML(xmlString);
xml.resolveExternals = true;
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
} else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
function loadXMLDoc() {
$.ajax({
method: "GET",
url: "data.xml",
dataType: "xml"
}).then(function (xml) {
console.log("done xml")
$.ajax({
method: "GET",
url: "render.xslt",
dataType: "xml"
}).then(function (xsl) {
console.log("done xsl")
tranform(xml, xsl)
})
},
function (e) {
console.log("Got error in xml", e.status)
})
}
$(loadXMLDoc)
foo/b.xml:
<dropdowns>
<dropdown name="xyz">
<option value="I">Info</option>
<option value="C">Category</option>
</dropdown>
</dropdowns>
data.xml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="render.xslt" ?>
<catalog name="xyz" />
a.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.3.1.js"></script>
<title>Document</title>
</head>
<body>
<div id="example"></div>
<script src="b.js"></script>
</body>
</html>
render.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="util.xslt" />
<xsl:output method="html"></xsl:output>
<xsl:template match="/">
<h1>
<xsl:value-of select="/catalog/@name"></xsl:value-of>
</h1>
<xsl:call-template name="dropdown">
<xsl:with-param name="listname">xyz</xsl:with-param>
<xsl:with-param name="value" select="/catalog/@name"/>
</xsl:call-template>
</xsl:template>
</xsl:stylesheet>
util.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"></xsl:output>
<xsl:template name="dropdown">
<xsl:param name="listname"/>
<xsl:param name="value"/>
<select>
<xsl:for-each select="document('foo/b.xml')/dropdowns/dropdown[@name=$listname]/option">
<option>
<xsl:attribute name="value">
<xsl:value-of select="@value"/>
</xsl:attribute>
<xsl:value-of select="."/>
</option>
</xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>
I am sorry it's a bit long to be an MVE example but it's complete.
Please let me know if any clarification required.
