[xsl] Dynamic processing of xml file using xsl and javascript

Subject: [xsl] Dynamic processing of xml file using xsl and javascript
From: "Matthew Hailstone" <mhailstone@xxxxxxxxxx>
Date: Thu, 28 Oct 2004 20:00:56 -0600
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[@name='One']/attr[@name='bgcolor']/> 
</xsl:attribute> 
</div> 
    <h1>Data</h1> 
<!--</body>--> 
</xsl:template> 
 
</xsl:stylesheet> 
 
 
Thanks! 
 
Matthew 

Current Thread