<-prev [Thread] next-> <-prev [Date] next->
Month Index | List Home

Re: [xsl] Using Javascript to pass parameters to embedded XSL stylesheet

Subject: Re: [xsl] Using Javascript to pass parameters to embedded XSL stylesheet
From: "Joe Fawcett" <joefawcett@xxxxxxxxxxx>
Date: Wed, 30 Mar 2005 21:42:15 +0100
----- 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
<- PreviousIndexNext ->
[xsl] Using Javascript to pass para, Maria Amuchastegui Thread [xsl] node positioning problem, Spencer Tickner
Re: [xsl] Tricky inclusion match, Karl Stubsjoen Date RE: [xsl] Using Javascript to pass , Maria Amuchastegui
Month