ansaurus

Question

how to run XSL file using JavaScript / HTML file

Answer 1

A:

To apply xsl trasformation I use, and promote, Sarissa. It is a crossbrowser library that envelope the xml apis of the different browser.

For an example of a trasformation with Sarissa you can head straight to the howto page but it is similar to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
  <title>sarissa test1</title>
  <script type="text/javascript" src="sarissa.js"></script>
</head>
<body>
  <script type="text/javascript">
     function loadXMLDoc(dname) {
       xhttp = new XMLHttpRequest();
       xhttp.open("GET",dname,false);
       xhttp.send("");
      return xhttp.responseXML;
     }

     var processor = new XSLTProcessor();
     var theXML = loadXMLDoc('xml.xml');
     var theXSL = loadXMLDoc('xsl.xsl');

     // prepare the processor
     processor.importStylesheet(theXSL);

     var theResult = processor.transformToDocument(theXML);
     // now you have a DomDocument with the result
     // if you want to serialize (transform to a string) it you van use

     document.write(new XMLSerializer().serializeToString(theResult));  
  </script>
</body>
</html>

Quick, easy, mantained and you can focus your efforts to the xsl creation instead than struggling to overcome the browsers differences.

The single glitch, to me is a plus but someone may see it as a limitation, the code is released under GPL 2.1 or higher or, if you prefer Apache Licence 2.0 or higher

Edit: Mine fault, I posted an old (and wrong code) without checking it. Created a new version miming your script (and tested it) on firefox, chrome, ie8, ie7 and it worked flawlessy. I used the first two xsl/xml found on a google search (I report them below for completeness). Try the code as is and with your xsl/xml. If it goes wrong report the malfunction too (we can be more effective with a deeper error description than - don't work - ). What happens when the code misbehave? (the browser freeze, report an error, return a blank result)

xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!--?xml-stylesheet type="text/xsl" href="xsl.xsl"?-->
<tutorials>
  <tutorial>
    <name>XML Tutorial</name>
    <url>http://www.quackit.com/xml/tutorial&lt;/url&gt;
  </tutorial>
  <tutorial>
    <name>HTML Tutorial</name>
    <url>http://www.quackit.com/html/tutorial&lt;/url&gt;
  </tutorial>
</tutorials>

xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
<!-- try to enable/disable the xsl:output -->
<!-- xsl:output method="xml" 
                version="1.0" 
                encoding="iso-8859-1" 
                indent="yes"/-->

<xsl:template match="/">
<html>
<head>
<title>XML XSL Example</title>
<style type="text/css">
body
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}

.tutorial-name
{
display:block;
font-weight:bold;
}

.tutorial-url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
</style>
</head>
<body>
<h2>Cool Tutorials</h2>
<p>Hey, check out these tutorials!</p>
  <xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="tutorial">
  <span class="tutorial-name"><xsl:value-of select="name"/></span>
  <span class="tutorial-url"><xsl:value-of select="url"/></span>
</xsl:template>

</xsl:stylesheet>

Eineki 2010-06-10 13:09:37

This set of code is also not working for Internet Explorer .....Plz check it and help me.Thanks

B. Kumar 2010-06-11 09:45:42

ansaurus

tags:

views:

answers:

how to run XSL file using JavaScript / HTML file

related questions