RE: [xsl] Using Javascript to pass parameters to embedded XSL sty lesheet

Subject: RE: [xsl] Using Javascript to pass parameters to embedded XSL sty lesheet
From: Maria Amuchastegui <mamuchastegui@xxxxxxxxxxx>
Date: Wed, 30 Mar 2005 15:44:14 -0500
Thanks! :)

Maria 

-----Original Message-----
From: Joe Fawcett [mailto:joefawcett@xxxxxxxxxxx] 
Sent: Wednesday, March 30, 2005 3:42 PM
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject: Re: [xsl] Using Javascript to pass parameters to embedded XSL
stylesheet

----- Original Message -----
From: "Maria Amuchastegui" <mamuchastegui@xxxxxxxxxxx>
To: <xsl-list@xxxxxxxxxxxxxxxxxxxxxx>
Sent: Wednesday, March 30, 2005 7:10 PM
Subject: [xsl] Using Javascript to pass parameters to embedded XSL
stylesheet


>I have a single XHTML file with an embedded XML data island as well as an
> embedded XSL stylesheet. I am using Javascript to pass sort parameters to
> the stylesheet.  The sort is working in Netscape -- which is quite amazing
> -- but in IE I get a "page cannot be displayed" error message.
>
> I am not sure if this is because the page is refreshing or because the
sort
> parameter is not getting picked up from the innerHTML property. I have
tried
> inserting "return false();" at various points in the script, but it did
not
> work.

I can get this to work as html, I don't have time now to get it fixed for
xhtml. 
There are a few of points
* Can you move the xml elements to the head, IE works better with them there
and 
you don't need the style displya set then?
* Your output method is html when you need xml for xhtml
* Your transformed elements, the table, should be in the nxhtml namespace
and 
they're not, but see next point.
* MOST IMPORTANTLY: IE doesn't support xhtml, the stylesheet is being lost
after 
the transform because of IE patching of the xhtml to get it into html
format.

Below is my working (in IE) html version:

<html>
  <head>
    <meta name=vs_targetSchema 
content="http://schemas.microsoft.com/intellisense/ie5";>
    <script language="JavaScript">
      var arrSort = new Array();
      arrSort["id"] = "ascending";
      arrSort["date"] = "ascending";
      arrSort["location"] = "ascending";
      arrSort["number"] = "ascending";
      arrSort["charges"] = "ascending";
      arrSort["savings"] = "ascending";
      arrSort["amount"] = "ascending";

      function sortXML(theLink)
      {
        var column = "location";
        var order = "descending";
        if (theLink)
        {
          column = theLink.innerHTML.toLowerCase();
          order = (arrSort[column] == "ascending" ? "descending" :
"ascending");
          arrSort[column] = order;
        }
        if (document.implementation &&
document.implementation.createDocument) 
//Netscape
        {
          var xslDoc;
          var xsltProcessor = new XSLTProcessor();
          var myDOM;
          var xmlDoc;
          var xslDoc = document.implementation.createDocument("", "", null);
          var myXSLNode = document.getElementById("myXSLStylesheet");
          var clonedXSLNode =
xslDoc.importNode(myXSLNode.childNodes.item(1), 
true);
          xslDoc.appendChild(clonedXSLNode);
          xsltProcessor.importStylesheet(xslDoc);
          var xmlDoc = document.implementation.createDocument("", "", null);
          var myNode = document.getElementById("myXMLData");
          var clonedNode = xmlDoc.importNode(myNode.childNodes.item(1),
true);
          xmlDoc.appendChild(clonedNode);
          xsltProcessor.setParameter(null, "sortKey", column);
          xsltProcessor.setParameter(null, "sortOrder", order);
          var fragment = xsltProcessor.transformToFragment(xmlDoc,document);
          var containerElement =
document.getElementById("ChargeableMessages");
          while (containerElement.hasChildNodes())
          {
            containerElement.removeChild(containerElement.lastChild);
          }
          myDOM = fragment;
 
document.getElementById("ChargeableMessages").appendChild(fragment);
        }
        else if (window.ActiveXObject) // Internet Explorer
        {
          var xslDoc = new
ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0");
          xslDoc.async = false;
          var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate.3.0");
 
xslDoc.load(document.getElementById("myXSLStylesheet").XMLDocument);
          xslTemplate.stylesheet = xslDoc;
          var xslProc = xslTemplate.createProcessor();
          xslProc.input = document.getElementById("myXMLData").XMLDocument;
          xslProc.addParameter("sortKey", column);
          xslProc.addParameter("sortOrder", order);
          xslProc.transform();
          ChargeableMessages.innerHTML = xslProc.output;
          return false;
        }
        else
        {
          alert('Your browser does not support client-side XSL 
transformations.'); //unsupported browser
        }
      }
    </script>

    <xml id="myXMLData">
      <myXMLData>
        <BTN number="635 5669">
          <Section number="430c" type="Detail" subHead1="Advantage Per Call"

subHead2="">
            <ServiceHeader group="Canada">
            <message>
              <id>1-06</id>
              <date>2005-05-06</date>
              <location>Collingwood ON</location>
              <number>705 445 1030</number>
              <duration>1.4</duration>
              <charges>5.01</charges>
              <savings />
              <amount />
            </message>
            <message>
              <id>1-07</id>
              <date>2005-04-12</date>
              <location>Erin ON</location>
              <number>519 833 2380</number>
              <duration>1.1</duration>
              <charges>0.78</charges>
              <savings />
              <amount />
            </message>
            <message>
              <id>1-08</id>
              <date>2005-04-09</date>
              <location>Barrie ON</location>
              <number>705 726 4242</number>
              <duration>.5</duration>
              <charges>0.47</charges>
              <savings />
              <amount />
            </message>
            <message>
              <id>1-09</id>
              <date>2005-05-09</date>
              <location>Longueuil QC</location>
              <number>450 463 7180</number>
              <duration>1.6</duration>
              <charges>0.69</charges>
              <savings />
              <amount />
            </message>
            </ServiceHeader>
            <ServiceHeader group="United States">
            <message>
              <id>1-10</id>
              <date>2005-05-10</date>
              <location>Folsom CA</location>
              <number>916 355 7200</number>
              <duration>2.4</duration>
              <charges>2.54</charges>
              <savings />
              <amount />
            </message>
            <message>
              <id>1-11</id>
              <date>2005-04-04</date>
              <location>Burlington MA</location>
              <number>781 270 1695</number>
              <duration>6</duration>
              <charges>10.35</charges>
              <savings />
              <amount />
            </message>
            </ServiceHeader>
          </Section>
          <Section number="450c" type="Summary" subHead1="" subHead2=""/>
        </BTN>
      </myXMLData>
    </xml>
    <xml id="myXSLStylesheet">
      <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"; 
version="1.0">
        <xsl:output method="html" />
        <xsl:param name="sortKey" select="'location'"/>
        <xsl:param name="sortOrder" select="'descending'" />
        <xsl:template match="/">
          <xsl:apply-templates select="myXMLData" />
        </xsl:template>
        <xsl:template match="myXMLData">
          <xsl:apply-templates select="//BTN" />
        </xsl:template>
        <xsl:template match="//BTN">
          <b><xsl:value-of select="@number" /></b>
          <xsl:for-each select="Section[@type='Detail']">
            <table border="1">
              <th colspan="6" align="left">
                <xsl:value-of select="@subHead1" /> - click on any column to

sort
              </th>
              <tr>
                <th>
                <a href="#" onclick="return sortXML(this);">ID</a>
                </th>
                <th>
                <a href="#" onclick="return sortXML(this);">Date</a>
                </th>
                <th>
                <a href="#" onclick="return sortXML(this);">Location</a>
                </th>
                <th>
                <a href="#" onclick="return sortXML(this);">Number</a>
                </th>
                <th>
                <a href="#" onclick="return sortXML(this);">Duration</a>
                </th>
                <th>
                <a href="#" onclick="return sortXML(this);">Charges</a>
                </th>
              </tr>
              <xsl:apply-templates select="ServiceHeader" />
            </table>
            <br />
          </xsl:for-each>
        </xsl:template>
        <xsl:template match="ServiceHeader">
          <xsl:if test="@group != '' ">
            <tr>
            <td colspan="6">
              <xsl:value-of select="@group" />
            </td>
            </tr>
          </xsl:if>
          <xsl:choose>
            <xsl:when test="($sortKey = 'duration') or ($sortKey =
'charges')">
            <xsl:apply-templates select="message">
              <xsl:sort select="*[name() = $sortKey]" order="{$sortOrder}" 
data-type="number" />
            </xsl:apply-templates>
            </xsl:when>
            <xsl:otherwise>
            <xsl:apply-templates select="message">
              <xsl:sort select="*[name() = $sortKey]" order="{$sortOrder}" 
data-type="text" />
            </xsl:apply-templates>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:template>
        <xsl:template match="message">
          <tr>
            <td>
            <xsl:value-of select="id" />
            </td>
            <td>
            <xsl:value-of select="date" />
            </td>
            <td>
            <xsl:value-of select="location" />
            </td>
            <td>
            <xsl:value-of select="number" />
            </td>
            <td>
            <xsl:value-of select="duration" />
            </td>
            <td>
            <xsl:value-of select="charges" />
            </td>
          </tr>
        </xsl:template>
      </xsl:stylesheet>
    </xml>
  </head>
  <body onload="sortXML();">
    <div id="ChargeableMessages"></div>
  </body>
</html>


Joe

Current Thread