xsl-list
[Top] [All Lists]

Re: Dynamic processing of xml file using xsl and javascript

2004-10-29 04:47:12
Hi Matthew,

xslStyleSheet.load(data.xsl); xsltProcessor.importStylesheet(xslStylesheet);
XMLDocument.load is asynchronous, so importStylesheet will not work this way (the file is not yet loaded). You must call it in an onload handler: cfr. http://www.mozilla.org/projects/xslt/js-interface.html

This should work (tested in Firefox 1.0PR):

 <script type="text/javascript" language="JavaScript">

   var processor = new XSLTProcessor();

   var dataXML = document.implementation.createDocument("", "", null);
   dataXML.load("data.xml");

   var dataXSL = document.implementation.createDocument("", "", null);
   dataXSL.addEventListener("load", onload, false);
   dataXSL.load("data.xsl");

   function onload()
   {
     processor.importStylesheet(dataXSL);
   }

   function XSLTransform(outputElement)
   {
var ownerDocument = document.implementation.createDocument("", "", null); var newFragment = processor.transformToFragment(dataXML, ownerDocument); var oldLink = document.getElementById("xsllink"); document.getElementById(outputElement).replaceChild(newFragment, oldLink);
   }

 </script>

Cheers,
Anton


Matthew Hailstone wrote:

All,
I am trying to use an xsl:stylesheet and javascript to dynamic change
the content of a webpage. I have included all the files for completeness
so no fragments of files can be seen out of context. (That does not mean
that all the content here is correct. Obviously this is not working and
thus my post.) This is my best attempt of course, from everything I've
been able to salvage on the the topic from the resources I've found. :)
I also wanted people searching the web for answers to have a complete
example when finished of what I am trying to do. Here are all the files: contents.html <html> <head> <script type=text/javascript> var xmlDocName = data.xml; var xmlDoc = document.implementation.createDocument(, , null); var xmlLoaded = false; function loadXML( filename ) { var doc; if (document.implementation && document.implementation.createDocument)

{ doc = document.implementation.createDocument(, , null); } else if (window.ActiveXObject) { doc = new ActiveXObject(Microsoft.XMLDOM); } else { alert('Your browser can\'t handle this script'); return; } doc.load(xmlDocName); return doc; } function XSLTransform(outputElement) { var xslStylesheet; var xsltProcessor = new XSLTProcessor(); // load the xml file, xmlURL, if not already loaded if (!xmlLoaded) { //xmlDoc = loadXML( xmlDocName ); xmlDoc = document.implementation.createDocument(, , null); xmlDoc.load(data.xml); xmlLoaded = true; }; // load the xsl file, xslURL //xslStyleSheet = loadXML( data.xsl ); xslStyleSheet = document.implementation.createDocument(, , null); xslStyleSheet.load(data.xsl); xsltProcessor.importStylesheet(xslStylesheet); // transform the xml against the xsl and save the output fragment var fragment = xsltProcessor.transformToFragment(xmlDoc, document); // replace the JS XSLTransform link with the output fragment // by doing a dom replace of fragment against the original // link (here represented as oldLink). var oldLink = document.getElementById(xsllink); document.getElementById(outputElement).replaceChild(fragment,oldLink);

} </script> </head> <body> <div> <a href =javascript:XSLTransform('linkoutput')>Frame a</a><br> </div> <div id=linkoutput style=margin:1em><div id=xsllink>Starting</div></div> </body> </html>


data.xml <?xml version=1.0?> <data> <dn name='One'> <attr name='bgcolor'>#8F8FBD</attr> <attr name='first'>First Attribute</attr> <attr name='second'>Second Attribute</attr> <attr name='third'>Third Attribute</attr> </dn> <dn name='Two'> <attr name='bgcolor'>#EBC79E</attr> <attr name='first'>First Attribute</attr> <attr name='second'>Second Attribute</attr> <attr name='third'>Third Attribute</attr> </dn> <dn name='Three'> <attr name='bgcolor'>#FFFFCC</attr> <attr name='first'>First Attribute</attr> <attr name='second'>Second Attribute</attr> <attr name='third'>Third Attribute</attr> </dn> </data>

data.xsl <?xml version=1.0?> <xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform version=1.0> <xsl:param name=dn>One</xsl:param> <xsl:output method=html></xsl:output> <xsl:template match=/> <!--<html>--> <xsl:apply-templates/> <!--</html>--> </xsl:template> <xsl:template match=data> <!--<body>--> <h1>HI!</h1> <div> <xsl:attribute name=bgcolor> <xsl:value-of select=dn[(_at_)name='One']/attr[(_at_)name='bgcolor']/> </xsl:attribute> </div> <h1>Data</h1> <!--</body>--> </xsl:template> </xsl:stylesheet>

Thanks!
Matthew