xsl-list
[Top] [All Lists]

Re: Re: Dynamic processing of xml file using xsl and javascript

2004-11-01 11:20:40
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