Wanted: Example of using javascript to dynamically perform XSLT using data islands

"Siegfried Heintze" <[email protected]> Sun, 30 Jan 2005 14:15:46 -0700
Newsgroups	gmane.comp.mozilla.devel.xml
Organization	Another Netscape Collabra Server User
Message-ID	<[email protected]>
I'm trying to write a page that dynamically preforms XSLT. Here is my
attempt, it is not working. I cannot figure out why it won't load my data
islands to do the transform.

Thanks,

Siegfried

<html>
<!--
 Begin commands to execute this file using Mozilla with bash
 /c/Program\ Files/mozilla.org/Mozilla/mozilla.exe
"file://c:\\Inetpub\\wwwroot\\SIGNITEK_PRIVATE\\Articles\\WebDev\\XSLT\\Mozi
lla\\Menu\\Menu.html"
 End commands to execute this file using Mozilla with bash

 Begin commands to execute this file using IE with bash
 IEXPLORE
"file://c:\\Inetpub\\wwwroot\\SIGNITEK_PRIVATE\\Articles\\WebDev\\XSLT\\Mozi
lla\\Menu\\Menu.html"
 End commands to execute this file using IE with bash
-->

  <head>
    <title>XSLT with Data Islands</title>
    <style type="text/css">
     xml {display: none;}
    </style>
  </head>

  <XML id="source">
    <?xml version='1.0'?>
    <?xml:stylesheet type="text/xsl" href="test" ?>
    <document>
    <!-- test comment -->
      <x name="x">x</x>
      <y name="y">y</y>
      <z name="z">z</z>

      <abc>
        <def>def</def>
      </abc>
    </document>
  </XML>
  <XML id="style">
    <?xml version="1.0"?>

    <!--  This is a test stylesheet used for testing the XSL processor-->

    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">

    <!-- set the output properties -->
    <xsl:output method="html"/>

    <!-- AttributeSet -->
    <xsl:attribute-set name="style1">
       <xsl:attribute name="COLOR">blue</xsl:attribute>
       <xsl:attribute name="SIZE">+0</xsl:attribute>
    </xsl:attribute-set>

    <xsl:attribute-set name="style2">
       <xsl:attribute name="COLOR">red</xsl:attribute>
       <xsl:attribute name="SIZE">+0</xsl:attribute>
    </xsl:attribute-set>

    <!-- root rule -->
    <xsl:template match="/">
       <xsl:processing-instruction name="foo">
          this is a test processing instruction
       </xsl:processing-instruction>
       <xsl:comment>TransforMiiX Test cases, written by Keith
Visco.</xsl:comment>
       <xsl:apply-templates/>
    </xsl:template>

    <!-- named template -->
    <xsl:template name="named-template-test">
       <xsl:param name="my-param" select="'default value'"/>
       named template processed with <xsl:text> </xsl:text>
       <xsl:value-of select="$my-param"/>!
       <xsl:if test="$dummy-param">
         <BR/>
         <FONT COLOR="red">
            Error, undeclared parameters should be ignored!
         </FONT>
       </xsl:if>
    </xsl:template>

    <!-- empty variable for named template test -->
    <xsl:variable name="dummy-param" />

    <!-- supress non-selected nodes-->
    <xsl:template match="*"/>

    <!-- variable tests -->
    <xsl:variable name="product-name">
      Transfor<FONT COLOR="blue">Mii</FONT>X
    </xsl:variable>
    <!-- main rule for document element -->
    <xsl:template match="document">
      <CENTER>
          <FONT COLOR="BLUE" FACE="Arial" SIZE="+1">
             <B>Mozilla XSLT</B>
          </FONT>
          <BR/>
          <B>Transfor<FONT COLOR="blue">Mii</FONT>X Test Cases</B>
     </CENTER>
     <P>
      This document serves to test basic XSL expressions.
     </P>
    </xsl:template>

    <!-- simple union expressions -->
    <xsl:template match="x | y | z" priority="1.0">
       element<B><xsl:text> </xsl:text><xsl:value-of select="@*"/></B>
       <xsl:if test="not(position()=3)">,</xsl:if>
    </xsl:template>

    <xsl:template match="x | y | z" mode="mode-test">
       <xsl:value-of select="@*"/>
       <xsl:if test="not(position()=3)"><xsl:text>, </xsl:text></xsl:if>
    </xsl:template>

    <xsl:template match="z">
       element (z): <B><xsl:value-of select="."/></B>
    </xsl:template>

    </xsl:stylesheet>
  </XML>
<script language="Javascript1.2">
<!--
alert('line 122: var processor = new XSLTProcessor();');
var processor = new XSLTProcessor();
alert('line 124: var testTransform =
document.implementation.createDocument("", "test", null);');
var testTransform = document.implementation.createDocument("", "test",
null);
alert("line 126: var xmlNode = window.document.getElementsByTagName('xml');
");
var xmlNode = window.document.getElementsByTagName('xml');
alert("line 128: var xslNode = xmlNode[1];");
var xslNode = xmlNode[1];
alert("line 130: xmlNode = xmlNode[0]; xsl="+(new
XMLSerializer()).serializeToString(xslNode));
xmlNode = xmlNode[0];
alert("line 132: xml= "+(new XMLSerializer()).serializeToString(xmlNode));

function onload() {
  alert('onload begin');
  processor.importStylesheet(xslNode);
  alert('onload end');
}
function OnBodyLoad(){
  // IExplorer code
  //xslTarget.innerHTML = source.transformNode(style.XMLDocument);

  // just an example to get a transform into a script as a DOM
  // XMLDocument.load is asynchronous, so all processing happens in the
  // onload handler
  alert('line 146: testTransform.addEventListener("load", onload, false);');
  testTransform.addEventListener("load", onload, false);

  // testTransform.load("test-transform.xml");
  alert('line 150: begin:  var newDocument =
processor.transformToDocument(xmlNode);');
  var newDocument = processor.transformToDocument(xmlNode);
  alert('line 152: return: var newDocument =
processor.transformToDocument(xmlNode);');
  xslTarget.innerHTML = newDocument;
  alert('line 154: xslTarget.innerHTML = newDocument;');
}

//-->
</script>

  <body OnLoad="OnBodyLoad()" style="margin-left: 0; margin-top: 0"
bgcolor="#FFFFFF" text="#000000" link="#427ED9" vlink="#855089"
alink="#0000FF">

    <font face="Arial">
      <p style="font-size:10pt; font-family:Verdana; color:gray"><b>This
demo shows
          the use of data islands for loading XML source and XSL style
sheets and
          inserting the transformed result into the Web page.</b></p>
      <div id="xslTarget">
      </div>
    </font>
  </body>
</html>