You have three options if you wish to do client side transformations, let's assume your files are called source.xml and style.xsl and are in the same folder:
* You can have an XML file with an associated XSLT file. You need to add the following processing instruction to the xml file
Code:
<?xml-stylesheet type="text/xsl" href="style.xsl" ?>
just after the prologue if there is one or as the top line.
* You can use client side script to load the two files into instances of the Dom (Msxml2.DomDocument.3.0 or Msxml2.DomDocument.4.0 would be best, below this transforms are unreliable) and transform. A simple web page for testing is here:
Code:
<html>
<head>
<title>Simple Transformer</title>
<script type="text/javascript">
var oSource = null;
var oStyle = null;
function showParseError(Err, Path)
{
var sError = "An error occurred loading '" + Path + "'"
+ "\nReason: " + Err.reason
+ "\nLine: " + Err.line
+ "\nsource: " + Err.srcText;
alert(sError);
}
function getDomDoc()
{
var oDom = new ActiveXObject("Msxml2.DomDocument.4.0");
/* If you have version 3 only use these line instead:
var oDom = new ActiveXObject("Msxml2.DomDocument.3.0");
oDom.setProperty("SelectionLanguage", "XPath");*/
oDom.async = false;
return oDom
}
function getTransform(XmlFile, XslFile)
{
var bLoaded = oSource.load(XmlFile);
if (!bLoaded)
{
showParseError(oSource.parseError, XmlFile);
return null;
}
bLoaded = oStyle.load(XslFile);
if (!bLoaded)
{
showParseError(oStyle.parseError, XslFile);
return null;
}
return oSource.transformNode(oStyle);
}
function doTransform(Output)
{
var sXmlPath = document.getElementById("txtSource").value;
var sXslPath = document.getElementById("txtStyle").value;
var sOutput = getTransform(sXmlPath, sXslPath);
if (sOutput == null)
{
return;
}
var oOutput;
if (Output == "textarea")
{
oOutput = document.getElementById("txtOutput");
oOutput.value = sOutput;
}
else
{
oOutput = window.frames["fraOutput"].document;
oOutput.open();
oOutput.write(sOutput);
oOutput.close();
}
}
function init()
{
oSource = getDomDoc();
oStyle = oSource.cloneNode(false);
}
</script>
</head>
<body bgcolor="#FFFFFF" onload="init();">
<table border="0" width="80%" align="center">
<tr>
<td>Xml file:<input type="file" id="txtSource" size="40"></td>
<td>Xsl file:<input type="file" id="txtStyle" size="40"></td>
</tr>
<tr>
<td align="center"><input type="button" onclick="doTransform('frame');" value="Transform to Frame"></td>
<td align="center"><input type="button" onclick="doTransform('textarea');" value="Transform to Textarea"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><iframe width="400px" height="480px" name="fraOutput"></iframe></td>
<td><textarea cols="50" rows="30" id="txtOutput"></textarea></td>
</tr>
</body>
</html>
* You can use xml data islands for a similar effect.
Joe (MVP - xml)
do xsl file have to be loaded on server?
