How can I use JavaScript to transform XML & XSLT?
I want to use JavaScript to show my XSLT, but on my server nothing is showing up in the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
function displayMessage() {
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("site-index.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("site-index.xsl")
// Transform
document.write(xml.transformNode(xsl))
}
</script>
</body>
</html>
javascript xml internet-explorer browser xslt
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
add a comment |
I want to use JavaScript to show my XSLT, but on my server nothing is showing up in the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
function displayMessage() {
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("site-index.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("site-index.xsl")
// Transform
document.write(xml.transformNode(xsl))
}
</script>
</body>
</html>
javascript xml internet-explorer browser xslt
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
TheActiveXObjectis available only for Microsoft's JScript. Check it under Internet Explorer.
– pepkin88
Apr 19 '11 at 20:48
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29
add a comment |
I want to use JavaScript to show my XSLT, but on my server nothing is showing up in the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
function displayMessage() {
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("site-index.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("site-index.xsl")
// Transform
document.write(xml.transformNode(xsl))
}
</script>
</body>
</html>
javascript xml internet-explorer browser xslt
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
I want to use JavaScript to show my XSLT, but on my server nothing is showing up in the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
function displayMessage() {
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("site-index.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("site-index.xsl")
// Transform
document.write(xml.transformNode(xsl))
}
</script>
</body>
</html>
javascript xml internet-explorer browser xslt
javascript xml internet-explorer browser xslt
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
edited Jul 23 '17 at 11:26
Brett DeWoody
29.6k1888131
29.6k1888131
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
asked Apr 19 '11 at 20:38
okMontyokMonty
772310
772310
TheActiveXObjectis available only for Microsoft's JScript. Check it under Internet Explorer.
– pepkin88
Apr 19 '11 at 20:48
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29
add a comment |
TheActiveXObjectis available only for Microsoft's JScript. Check it under Internet Explorer.
– pepkin88
Apr 19 '11 at 20:48
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29
The
ActiveXObject is available only for Microsoft's JScript. Check it under Internet Explorer.– pepkin88
Apr 19 '11 at 20:48
The
ActiveXObject is available only for Microsoft's JScript. Check it under Internet Explorer.– pepkin88
Apr 19 '11 at 20:48
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29
add a comment |
5 Answers
5
active
oldest
votes
The browser can perform the tranform for you. No javascript is needed, just link the .xsl from the .xml like this:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
and just serve the xml, no html. Assuming your .xsl contains the right code, along the lines
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
answered Apr 19 '11 at 20:59
XenanXenan
438311
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
add a comment |
You are probably better off allowing the browser to perform the transformation using the method Xenan outlines. However, it is perfectly possible to do this in JavaScript as well. Here is an outline of how you might accomplish this in a cross-browser manner.
First, you will need to load the XML and XSL. There are many ways of doing this. Usually, it will involve some sort of AJAX, but not necessarily. To keep this answer simple, I will assume you have this part covered, but please let me know if you need more help, and I will edit to include an example of loading XML.
Therefore, let us assume we have these objects:
var xml, xsl;
Where xml contains an XML structure, and xsl contains the stylesheet that you wish to transform with.
Edit:
If you need to load those objects, you will end up using some form of AJAX to do so. There are many examples of cross-browser AJAX out there. You will be better off using a library to accomplish this, rather than rolling your own solution. I suggest you look into jquery or YUI, both of which do an excellent job of this.
However, the basic idea is pretty simple. To complete this answer, here is some non-library specific code that accomplishes this in a cross-browser manner:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
You would use this code by giving it a path to your XML, and a function to execute when loading is complete:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
I have updated my example to show this technique. You can find some working demonstration code here.
To perform a transformation, you will end up with a third XML document, which is the result of that transformation. If you are working with IE, you use the "transformNodeToObject" method, and if you are working with other browsers, you use the "transformToDocument" method:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
At this point, result should contain the resulting transformation. This is still an XML document, and you should treat it as such. If you want a string which you can pass into document.write or innerHTML, you have a little more work to do.
Once again, there is an IE method for this, and a method that applies to other browsers.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Now s should contain the resulting XML as a string. You should be able to pass this into document.write or innerHTML and have it do something useful. Note that it may contain an XML declaration, which you might want to strip out, or not.
I've tested this in Chrome, IE9, and FF4. You can find a simplified, barebones, working example of this in my testbed.
Good luck and happy coding!
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
add a comment |
Use this script to transform test.xml using test.xsl and append the output to container.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
add a comment |
This works in Chrome/Firefox/Edge/IE11
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("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(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("mmlctop2_0.xsl");
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("input.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();
alert(xslProc.output);
}
}
}
answered Nov 5 '17 at 21:55
murklemurkle
1595
add a comment |
Just a comment in a form of an answer due to low reputation.
if you get the documents via AJAX call, DO return the xhttp.responseXML and do NOT return xhttp.responseXML.documentElement.
Both can be converted using XMLSerializer to a meaningful representation of the document but only the first statement is a viable parameter for the XSL Transformation.
If the latter is used the return value of the XSLTransformation (using either toDocument or toFragment function) is null in my case (using Chrome)
For that matter, I don't believe Chrome has dropped XSLT support as stated somewhere on the page here.
Hope that helps
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f5722410%2fhow-can-i-use-javascript-to-transform-xml-xslt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
The browser can perform the tranform for you. No javascript is needed, just link the .xsl from the .xml like this:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
and just serve the xml, no html. Assuming your .xsl contains the right code, along the lines
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
answered Apr 19 '11 at 20:59
XenanXenan
438311
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
add a comment |
The browser can perform the tranform for you. No javascript is needed, just link the .xsl from the .xml like this:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
and just serve the xml, no html. Assuming your .xsl contains the right code, along the lines
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
answered Apr 19 '11 at 20:59
XenanXenan
438311
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
add a comment |
The browser can perform the tranform for you. No javascript is needed, just link the .xsl from the .xml like this:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
and just serve the xml, no html. Assuming your .xsl contains the right code, along the lines
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
answered Apr 19 '11 at 20:59
XenanXenan
438311
The browser can perform the tranform for you. No javascript is needed, just link the .xsl from the .xml like this:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
and just serve the xml, no html. Assuming your .xsl contains the right code, along the lines
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
answered Apr 19 '11 at 20:59
XenanXenan
438311
answered Apr 19 '11 at 20:59
XenanXenan
438311
answered Apr 19 '11 at 20:59
XenanXenan
438311
answered Apr 19 '11 at 20:59
XenanXenan
438311
438311
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
add a comment |
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
15
15
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
Yes, but that's not what was asked, I think.
– user357812
Apr 19 '11 at 23:06
5
5
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
The asker wants to use Javascript, this is not the right answer.
– user453441
Aug 10 '12 at 18:13
2
2
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
It seems to me that in some cases a user may not know of a better solution and in most cases just indicated the XSLT file as the stylesheet of an XML file would work very well.
– Alexis Wilke
Dec 24 '14 at 0:19
add a comment |
You are probably better off allowing the browser to perform the transformation using the method Xenan outlines. However, it is perfectly possible to do this in JavaScript as well. Here is an outline of how you might accomplish this in a cross-browser manner.
First, you will need to load the XML and XSL. There are many ways of doing this. Usually, it will involve some sort of AJAX, but not necessarily. To keep this answer simple, I will assume you have this part covered, but please let me know if you need more help, and I will edit to include an example of loading XML.
Therefore, let us assume we have these objects:
var xml, xsl;
Where xml contains an XML structure, and xsl contains the stylesheet that you wish to transform with.
Edit:
If you need to load those objects, you will end up using some form of AJAX to do so. There are many examples of cross-browser AJAX out there. You will be better off using a library to accomplish this, rather than rolling your own solution. I suggest you look into jquery or YUI, both of which do an excellent job of this.
However, the basic idea is pretty simple. To complete this answer, here is some non-library specific code that accomplishes this in a cross-browser manner:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
You would use this code by giving it a path to your XML, and a function to execute when loading is complete:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
I have updated my example to show this technique. You can find some working demonstration code here.
To perform a transformation, you will end up with a third XML document, which is the result of that transformation. If you are working with IE, you use the "transformNodeToObject" method, and if you are working with other browsers, you use the "transformToDocument" method:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
At this point, result should contain the resulting transformation. This is still an XML document, and you should treat it as such. If you want a string which you can pass into document.write or innerHTML, you have a little more work to do.
Once again, there is an IE method for this, and a method that applies to other browsers.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Now s should contain the resulting XML as a string. You should be able to pass this into document.write or innerHTML and have it do something useful. Note that it may contain an XML declaration, which you might want to strip out, or not.
I've tested this in Chrome, IE9, and FF4. You can find a simplified, barebones, working example of this in my testbed.
Good luck and happy coding!
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
add a comment |
You are probably better off allowing the browser to perform the transformation using the method Xenan outlines. However, it is perfectly possible to do this in JavaScript as well. Here is an outline of how you might accomplish this in a cross-browser manner.
First, you will need to load the XML and XSL. There are many ways of doing this. Usually, it will involve some sort of AJAX, but not necessarily. To keep this answer simple, I will assume you have this part covered, but please let me know if you need more help, and I will edit to include an example of loading XML.
Therefore, let us assume we have these objects:
var xml, xsl;
Where xml contains an XML structure, and xsl contains the stylesheet that you wish to transform with.
Edit:
If you need to load those objects, you will end up using some form of AJAX to do so. There are many examples of cross-browser AJAX out there. You will be better off using a library to accomplish this, rather than rolling your own solution. I suggest you look into jquery or YUI, both of which do an excellent job of this.
However, the basic idea is pretty simple. To complete this answer, here is some non-library specific code that accomplishes this in a cross-browser manner:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
You would use this code by giving it a path to your XML, and a function to execute when loading is complete:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
I have updated my example to show this technique. You can find some working demonstration code here.
To perform a transformation, you will end up with a third XML document, which is the result of that transformation. If you are working with IE, you use the "transformNodeToObject" method, and if you are working with other browsers, you use the "transformToDocument" method:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
At this point, result should contain the resulting transformation. This is still an XML document, and you should treat it as such. If you want a string which you can pass into document.write or innerHTML, you have a little more work to do.
Once again, there is an IE method for this, and a method that applies to other browsers.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Now s should contain the resulting XML as a string. You should be able to pass this into document.write or innerHTML and have it do something useful. Note that it may contain an XML declaration, which you might want to strip out, or not.
I've tested this in Chrome, IE9, and FF4. You can find a simplified, barebones, working example of this in my testbed.
Good luck and happy coding!
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
add a comment |
You are probably better off allowing the browser to perform the transformation using the method Xenan outlines. However, it is perfectly possible to do this in JavaScript as well. Here is an outline of how you might accomplish this in a cross-browser manner.
First, you will need to load the XML and XSL. There are many ways of doing this. Usually, it will involve some sort of AJAX, but not necessarily. To keep this answer simple, I will assume you have this part covered, but please let me know if you need more help, and I will edit to include an example of loading XML.
Therefore, let us assume we have these objects:
var xml, xsl;
Where xml contains an XML structure, and xsl contains the stylesheet that you wish to transform with.
Edit:
If you need to load those objects, you will end up using some form of AJAX to do so. There are many examples of cross-browser AJAX out there. You will be better off using a library to accomplish this, rather than rolling your own solution. I suggest you look into jquery or YUI, both of which do an excellent job of this.
However, the basic idea is pretty simple. To complete this answer, here is some non-library specific code that accomplishes this in a cross-browser manner:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
You would use this code by giving it a path to your XML, and a function to execute when loading is complete:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
I have updated my example to show this technique. You can find some working demonstration code here.
To perform a transformation, you will end up with a third XML document, which is the result of that transformation. If you are working with IE, you use the "transformNodeToObject" method, and if you are working with other browsers, you use the "transformToDocument" method:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
At this point, result should contain the resulting transformation. This is still an XML document, and you should treat it as such. If you want a string which you can pass into document.write or innerHTML, you have a little more work to do.
Once again, there is an IE method for this, and a method that applies to other browsers.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Now s should contain the resulting XML as a string. You should be able to pass this into document.write or innerHTML and have it do something useful. Note that it may contain an XML declaration, which you might want to strip out, or not.
I've tested this in Chrome, IE9, and FF4. You can find a simplified, barebones, working example of this in my testbed.
Good luck and happy coding!
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
You are probably better off allowing the browser to perform the transformation using the method Xenan outlines. However, it is perfectly possible to do this in JavaScript as well. Here is an outline of how you might accomplish this in a cross-browser manner.
First, you will need to load the XML and XSL. There are many ways of doing this. Usually, it will involve some sort of AJAX, but not necessarily. To keep this answer simple, I will assume you have this part covered, but please let me know if you need more help, and I will edit to include an example of loading XML.
Therefore, let us assume we have these objects:
var xml, xsl;
Where xml contains an XML structure, and xsl contains the stylesheet that you wish to transform with.
Edit:
If you need to load those objects, you will end up using some form of AJAX to do so. There are many examples of cross-browser AJAX out there. You will be better off using a library to accomplish this, rather than rolling your own solution. I suggest you look into jquery or YUI, both of which do an excellent job of this.
However, the basic idea is pretty simple. To complete this answer, here is some non-library specific code that accomplishes this in a cross-browser manner:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
You would use this code by giving it a path to your XML, and a function to execute when loading is complete:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
I have updated my example to show this technique. You can find some working demonstration code here.
To perform a transformation, you will end up with a third XML document, which is the result of that transformation. If you are working with IE, you use the "transformNodeToObject" method, and if you are working with other browsers, you use the "transformToDocument" method:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
At this point, result should contain the resulting transformation. This is still an XML document, and you should treat it as such. If you want a string which you can pass into document.write or innerHTML, you have a little more work to do.
Once again, there is an IE method for this, and a method that applies to other browsers.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Now s should contain the resulting XML as a string. You should be able to pass this into document.write or innerHTML and have it do something useful. Note that it may contain an XML declaration, which you might want to strip out, or not.
I've tested this in Chrome, IE9, and FF4. You can find a simplified, barebones, working example of this in my testbed.
Good luck and happy coding!
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
edited Apr 20 '11 at 16:59
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
answered Apr 19 '11 at 22:26
Chris NielsenChris Nielsen
12.3k53953
12.3k53953
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
add a comment |
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
Thank you much for the feed back, but I'm not sure how to load the xml or xslt in the code you have provided
– okMonty
Apr 20 '11 at 12:06
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
I have updated my answer with an example of how you might load the actual XML and XSL files. Please see the embedded links for a working example.
– Chris Nielsen
Apr 20 '11 at 17:00
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
thank you very much, but I'm sad they say the issue was not in the script. It was something fairly simple in XSLT file....
– okMonty
Apr 20 '11 at 17:40
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Are the browser XSLT implementations version 1.0 or 2.0?
– Alexis Wilke
Dec 24 '14 at 0:11
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
Also, is there a way to do this in jQuery?
– Doug Barbieri
May 10 '17 at 23:03
add a comment |
Use this script to transform test.xml using test.xsl and append the output to container.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
add a comment |
Use this script to transform test.xml using test.xsl and append the output to container.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
add a comment |
Use this script to transform test.xml using test.xsl and append the output to container.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
Use this script to transform test.xml using test.xsl and append the output to container.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
edited Apr 22 '16 at 6:20
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
answered Apr 22 '16 at 6:03
SorterSorter
5,80044351
5,80044351
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
add a comment |
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
transformToFragment gives a null value in Chrome and the importStylesheet is imported in Chrome as Stylesheet but in Mozilla it does not import.
– Mateen Kadwaikar
Jul 14 '17 at 4:48
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
@MateenKadwaikar I believe Chrome dropped native XSLT support. I think I'm close to figuring out a shim so I can progressively-enhance Chrome and any future browsers that drop support.
– Jeromy French
Mar 2 '18 at 3:01
add a comment |
This works in Chrome/Firefox/Edge/IE11
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("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(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("mmlctop2_0.xsl");
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("input.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();
alert(xslProc.output);
}
}
}
answered Nov 5 '17 at 21:55
murklemurkle
1595
add a comment |
This works in Chrome/Firefox/Edge/IE11
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("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(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("mmlctop2_0.xsl");
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("input.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();
alert(xslProc.output);
}
}
}
answered Nov 5 '17 at 21:55
murklemurkle
1595
add a comment |
This works in Chrome/Firefox/Edge/IE11
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("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(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("mmlctop2_0.xsl");
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("input.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();
alert(xslProc.output);
}
}
}
answered Nov 5 '17 at 21:55
murklemurkle
1595
This works in Chrome/Firefox/Edge/IE11
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("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(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("mmlctop2_0.xsl");
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("input.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();
alert(xslProc.output);
}
}
}
answered Nov 5 '17 at 21:55
murklemurkle
1595
answered Nov 5 '17 at 21:55
murklemurkle
1595
answered Nov 5 '17 at 21:55
murklemurkle
1595
answered Nov 5 '17 at 21:55
murklemurkle
1595
1595
add a comment |
add a comment |
Just a comment in a form of an answer due to low reputation.
if you get the documents via AJAX call, DO return the xhttp.responseXML and do NOT return xhttp.responseXML.documentElement.
Both can be converted using XMLSerializer to a meaningful representation of the document but only the first statement is a viable parameter for the XSL Transformation.
If the latter is used the return value of the XSLTransformation (using either toDocument or toFragment function) is null in my case (using Chrome)
For that matter, I don't believe Chrome has dropped XSLT support as stated somewhere on the page here.
Hope that helps
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
add a comment |
Just a comment in a form of an answer due to low reputation.
if you get the documents via AJAX call, DO return the xhttp.responseXML and do NOT return xhttp.responseXML.documentElement.
Both can be converted using XMLSerializer to a meaningful representation of the document but only the first statement is a viable parameter for the XSL Transformation.
If the latter is used the return value of the XSLTransformation (using either toDocument or toFragment function) is null in my case (using Chrome)
For that matter, I don't believe Chrome has dropped XSLT support as stated somewhere on the page here.
Hope that helps
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
add a comment |
Just a comment in a form of an answer due to low reputation.
if you get the documents via AJAX call, DO return the xhttp.responseXML and do NOT return xhttp.responseXML.documentElement.
Both can be converted using XMLSerializer to a meaningful representation of the document but only the first statement is a viable parameter for the XSL Transformation.
If the latter is used the return value of the XSLTransformation (using either toDocument or toFragment function) is null in my case (using Chrome)
For that matter, I don't believe Chrome has dropped XSLT support as stated somewhere on the page here.
Hope that helps
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
Just a comment in a form of an answer due to low reputation.
if you get the documents via AJAX call, DO return the xhttp.responseXML and do NOT return xhttp.responseXML.documentElement.
Both can be converted using XMLSerializer to a meaningful representation of the document but only the first statement is a viable parameter for the XSL Transformation.
If the latter is used the return value of the XSLTransformation (using either toDocument or toFragment function) is null in my case (using Chrome)
For that matter, I don't believe Chrome has dropped XSLT support as stated somewhere on the page here.
Hope that helps
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
answered Nov 13 '18 at 14:26
BennyHilariousBennyHilarious
659
659
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f5722410%2fhow-can-i-use-javascript-to-transform-xml-xslt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The
ActiveXObjectis available only for Microsoft's JScript. Check it under Internet Explorer.– pepkin88
Apr 19 '11 at 20:48
move on to xslt 2.0 because edgeHTML 14 breaks when xsl contains ext:node-set. in XSLT 2.0 there is no more result tree fragments which required the use of the node-set function. You just get a nodeset in all cases.
– yan bellavance
Sep 22 '16 at 23:29