Hi folks!
Long time I wished being able to pass global parameters in client-side
transformations.
Now, I think it becomes possible! This is my attempt to combine Moz and
IE code... it should work on Mozilla, Netscape 7 and IE6.
<html>
<head>
<script type="text/javascript">
// platformMoz: http://www.mozilla.org/projects/xslt/js-interface.html
// platformIE: http://www.perfectxml.com/articles/xml/XSLTInMSXML.asp
var platformMoz = (document.implementation &&
document.implementation.createDocument);
var platformIE = (!platformMoz && document.getElementById &&
window.ActiveXObject);
var noXSLT = (!platformMoz && !platformIE);
var urlXML;
var urlXSL;
var docXML;
var docXSL;
var target;
var cache;
var processor;
var paramName;
var paramValue;
if (platformIE)
{
cache = new ActiveXObject('Msxml2.XSLTemplate.4.0');
}
function Initialize(targetId)
{
if (noXSLT)
{
FatalError();
return;
}
target = document.getElementById(targetId);
}
function SetInput(url)
{
urlXML = url;
}
function SetStylesheet(url)
{
urlXSL = url;
}
function SetParam(name, value)
{
paramName = name;
paramValue = value;
}
function FatalError()
{
alert("Sorry, this doesn't work in your browser");
}
function CreateDocument()
{
var doc = null;
if (platformMoz)
{
doc = document.implementation.createDocument('', '', null);
}
else if (platformIE)
{
doc = new ActiveXObject('Msxml2.FreeThreadedDOMDocument.4.0');
}
return doc;
}
function Transform()
{
if (noXSLT)
{
FatalError();
return;
}
docXML = CreateDocument();
docXSL = CreateDocument();
if (platformMoz)
{
docXML.load(urlXML);
docXSL.addEventListener('load', DoTransform, false);
docXSL.load(urlXSL);
}
else if (platformIE)
{
docXML.async = false;
docXML.load(urlXML);
docXSL.async = false;
docXSL.load(urlXSL);
DoTransform();
}
}
function DoTransform()
{
if (platformMoz)
{
processor = new XSLTProcessor();
processor.importStylesheet(docXSL);
processor.setParameter(null, paramName, paramValue);
var fragment = processor.transformToFragment(docXML, document);
while (target.hasChildNodes())
target.removeChild(target.childNodes[0]);
target.appendChild(fragment);
}
else if (platformIE)
{
cache.stylesheet = docXSL;
processor = cache.createProcessor();
processor.input = docXML;
processor.addParameter(paramName, paramValue);
processor.transform();
target.innerHTML = processor.output;
}
}
</script>
</head>
<body onload="Initialize('target'); SetInput('data.xml');
SetStylesheet('data.xsl');">
<div id="target"><div>Loading...</div></div>
...
<a onclick="SetParam('lang','en'); Transform();">english</a>
...
</body>
</html>
Check out a working example here:
http://users.telenet.be/cking/webstuff/dynamic-xslt/dynamic.html
Cheers,
Anton