[XSL-LIST Mailing List Archive Home] [By Thread] [By Date] [Recent Entries] [Reply To This Message]

Re: Using Javascript to pass parameters to embedded XS

Subject: Re: Using Javascript to pass parameters to embedded XSL stylesheet
From: "Joe Fawcett" <joefawcett@xxxxxxxxxxx>
Date: Wed, 30 Mar 2005 21:42:15 +0100
thelink.innerhtml
----- Original Message ----- From: "Maria Amuchastegui" <mamuchastegui@xxxxxxxxxxx>
To: <xsl-list@xxxxxxxxxxxxxxxxxxxxxx>
Sent: Wednesday, March 30, 2005 7:10 PM
Subject: 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

PURCHASE STYLUS STUDIO ONLINE TODAY!

Purchasing Stylus Studio from our online shop is Easy, Secure and Value Priced!

Buy Stylus Studio Now

Download The World's Best XML IDE!

Accelerate XML development with our award-winning XML IDE - Download a free trial today!

Don't miss another message! Subscribe to this list today.
Email
First Name
Last Name
Company
Subscribe in XML format
RSS 2.0
Atom 0.3
Site Map | Privacy Policy | Terms of Use | Trademarks
Free Stylus Studio XML Training:
W3C Member
Stylus Studio® and DataDirect XQuery ™are products from DataDirect Technologies, is a registered trademark of Progress Software Corporation, in the U.S. and other countries. © 2004-2013 All Rights Reserved.