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

RE: Using javascript to pass a parameter to XSL

Subject: RE: Using javascript to pass a parameter to XSL
From: Pieter Reint Siegers Kort <pieter.siegers@xxxxxxxxxxx>
Date: Thu, 17 Mar 2005 13:20:46 -0600
msxml2.freethreadeddomdocument.3.0
Second correction. With Joe's suggestion, and a few more changes, it works
now:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript">
function sortXML(column,order)
{
  alert("column = " + column);
  alert("order = " + order);
	var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
	var xsldoc = new
ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
	var xslproc;
	xsldoc.async = false;
	xsldoc.load('Sort.xsl');
	xslt.stylesheet = xsldoc;
	var xmldoc = document.getElementById('ChargeableMessages');
	xslproc = xslt.createProcessor();
	xslproc.input = xmldoc;
	// var strColumn = column.toString();
	strColumn = new String(column);
	// xslproc.addParameter("sortKey", strColumn.toString());
	xslproc.addParameter("sortKey", "id");
	// var strOrder = order.toString();
	xslproc.addParameter("sortOrder", order.toString());
	xslproc.transform();
	container.innerHTML = xmldoc.transformNode(xsldoc);
}

function sortXML2(column,order)
{
	// debug info
	alert("column = " + column);
	alert("order = " + order);

	var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
	var xsldoc = new
ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
	var xslproc;
	xsldoc.async = false;
	xsldoc.load("Sort.xsl");
	if (xsldoc.parseError.errorCode != 0)
	{
   		var myErr = xsldoc.parseError;
   		alert("You have an XSLT parse error: " + myErr.reason);
	}
	else
	{
   		xslt.stylesheet = xsldoc;
   		var xmldoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
		xmldoc = document.getElementById('ChargeableMessages');
   		if (xmldoc.parseError.errorCode != 0)
   		{
      		var myErr = xmldoc.parseError;
      		alert("You have an XML parse error: " + myErr.reason);
   		}
   		else
   		{
      		xslproc = xslt.createProcessor();
      		xslproc.input = xmldoc;
			xslproc.addParameter("sortKey", column);
			xslproc.addParameter("sortOrder", order);
      		xslproc.transform();
      		container.innerHTML = xslproc.output;
   		}
	}
}
</script>
</head>

<body onload="sortXML2('id','ascending');">

<div id="container"></div>

<xml id="ChargeableMessages" style="display:none;">
	<chargeablemessages>
		<message>
			<id>1-01</id>
			<date>2005-04-23</date>
			<location>Quebec QC</location>
			<number>418 683 1234</number>
			<duration>1</duration>
			<charges>0.43</charges>
			<savings>.043</savings>
			<amount/>
		</message>
		<message>
			<id>1-02</id>
			<date>2005-04-28</date>
			<location>Montreal QC</location>
			<number>514 485 6611</number>
			<duration>2</duration>
			<charges>3.44</charges>
			<savings/>
			<amount/>
		</message>
		<message>
			<id>1-03</id>
			<date>2005-05-01</date>
			<location>Winnipeg MB</location>
			<number>204 475 4565</number>
			<duration>22</duration>
			<charges>0.55</charges>
			<savings/>
			<amount/>
		</message>
	</chargeablemessages>
</xml>

</body>
</html>


XSLT:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">

	<xsl:output method="html"/>

	<xsl:param name="sortKey" />
	<xsl:param name="sortOrder" />

	<xsl:template match="/">
		<xsl:apply-templates select="chargeablemessages"/>
	</xsl:template>

	<xsl:template match="chargeablemessages">

		<br/><br/>
		<xsl:text>sortKey=</xsl:text><xsl:value-of
select="$sortKey"/>
		<br/><br/>
		<xsl:text>sortOrder=</xsl:text><xsl:value-of
select="$sortOrder"/>
		<br/><br/>

		<h3>Long distance calls - Click on any column heading to
sort</h3>
		<table border="1">
		<tbody>
		<tr>
		<th><a href="#"
onclick="sortXML2('id','ascending');">ID</a></th>
		<th><a href="#"
onclick="sortXML2('date','ascending');">Date</a></th>
		<th><a href="#"
onclick="sortXML2('location','ascending');">Location</a></th>
		<th><a href="#"
onclick="sortXML2('number','ascending');">Number</a></th>
		<th><a href="#"
onclick="sortXML2('duration','ascending');">Duration</a></th>
		<th><a href="#"
onclick="sortXML2('charges','ascending');">Charges</a></th>
		</tr>

		<xsl:apply-templates select="//message">
		<xsl:sort select="*[name() = $sortKey]"
order="{$sortOrder}"/>
		</xsl:apply-templates>

		</tbody>
		</table>
	</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>


You should be able to take out the debug code parts.

Cheers,
<prs/>

*****************************************************

Correction. I should add that clicking on the columns, the strings are
correctly passed into the JavaScript function but then disappear when the
result is displayed.

So the suggestion of Joe still can't be tested. Let me see if I can trace
the problem, or maybe another person could jump in here.

*****************************************************

That is a Javascript issue then; check if the parameters passed into the
function do have the value you want them to. You can use

  alert("column = " + column);
  alert("order = " + order);

to debug.

Seems to work.

OK, then next is to verify if the parameters are passed into the stylesheet.

Hm, they don't get passed. Try this function and compare (it works here):

function sortXML2(column,order)
{
	// debug info
	alert("column = " + column);
	alert("order = " + order);

	var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
	var xsldoc = new
ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
	var xslproc;
	xsldoc.async = false;
	xsldoc.load("Sort.xsl");
	if (xsldoc.parseError.errorCode != 0)
	{
   		var myErr = xsldoc.parseError;
   		alert("You have an XSLT parse error: " + myErr.reason);
	}
	else
	{
   		xslt.stylesheet = xsldoc;
   		var xmldoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
		xmldoc = document.getElementById('ChargeableMessages');
   		if (xmldoc.parseError.errorCode != 0)
   		{
      		var myErr = xmldoc.parseError;
      		alert("You have an XML parse error: " + myErr.reason);
   		}
   		else
   		{
      		xslproc = xslt.createProcessor();
      		xslproc.input = xmldoc;
			xslproc.addParameter("sortKey", column);
			xslproc.addParameter("sortOrder", order);
      		xslproc.transform();
      		container.innerHTML = xslproc.output;
   		}
	}
}

Didn't test if the sort really works, but your parameters are passed in now
correctly.

Let us know if the sort works now, OK?

HTH,
<prs/>

-----Original Message-----
From: Maria Amuchastegui [mailto:mamuchastegui@xxxxxxxxxxx]
Sent: Jueves, 17 de Marzo de 2005 12:00 p.m.
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject: RE:  Using javascript to pass a parameter to XSL

>  <xsl:sort select="$sortKey" order="{$sortOrder}"/>

Now the transformation is happening, but the data is still not sorting, and
the value assigned to the variable in the javascript function call is still
not getting passed to the stylesheet.

Maria


-----Original Message-----
From: Pieter Reint Siegers Kort [mailto:pieter.siegers@xxxxxxxxxxx]
Sent: Thursday, March 17, 2005 12:42 PM
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject: RE:  Using javascript to pass a parameter to XSL

Hi Maria,

> I've almost got it but it doesn't quite work.

What exactly doesn't work? Let's see...

To start, first error I get is from MSXML 3.0 that complains:

"The value of the "order" attribute may only be "ascending" or "descending""

See Michael Kay's 2nd Edition of XSLT, page 296.

I suggest you want the parameter "order" to contain "ascending" or
"descending", right?

Try

<xsl:sort select="$sortKey" order="{$sortOrder}"/>

That should do the trick.

Cheers,
<prs/>

-----Original Message-----
From: Maria Amuchastegui [mailto:mamuchastegui@xxxxxxxxxxx]
Sent: Jueves, 17 de Marzo de 2005 11:12 a.m.
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject:  Using javascript to pass a parameter to XSL

I have an HTML file with an embedded XML island which calls an external
stylesheet. I want to use Javascript to pass a parameter to the stylesheet
using the addParameter method. I've almost got it but it doesn't quite work.

Here is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head> <script language="JavaScript"> function sortXML(column,order) { var
xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
var xslproc;
xsldoc.async = false;
xsldoc.load('Sort.xsl');
xslt.stylesheet = xsldoc;
var xmldoc = document.getElementById('ChargeableMessages');
xslproc = xslt.createProcessor();
xslproc.input = xmldoc;
xslproc.addParameter("sortKey", column); xslproc.addParameter("sortOrder",
order); xslproc.transform();
container.innerHTML = xmldoc.transformNode(xsldoc);
}
</script>
</head>
<body onload="sortXML('id','ascending');">

<div id="container"></div>

<xml id="ChargeableMessages" style="display:none;">
	<chargeablemessages>
		<message>
			<id>1-01</id>
			<date>2005-04-23</date>
			<location>Quebec QC</location>
			<number>418 683 1234</number>
			<duration>1</duration>
			<charges>0.43</charges>
			<savings>.043</savings>
			<amount/>
		</message>
		<message>
			<id>1-02</id>
			<date>2005-04-28</date>
			<location>Montreal QC</location>
			<number>514 485 6611</number>
			<duration>2</duration>
			<charges>3.44</charges>
			<savings/>
			<amount/>
		</message>
		<message>
			<id>1-03</id>
			<date>2005-05-01</date>
			<location>Winnipeg MB</location>
			<number>204 475 4565</number>
			<duration>22</duration>
			<charges>0.55</charges>
			<savings/>
			<amount/>
		</message>
	</chargeablemessages>
</xml>

</body>
</html>

And here is the stylesheet:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
	<xsl:param name="sortKey"/>
	<xsl:param name="sortOrder"/>
	<xsl:template match="/">
		<xsl:apply-templates select="chargeablemessages"/>
	</xsl:template>
	<xsl:template match="chargeablemessages">
		<h3>Long distance calls - Click on any column heading to
sort</h3>
		<table border="1">
		<tbody>
		<tr>
		<th><a href="#"
onclick="sortXML('id','ascending');">ID</a></th>
		<th><a href="#"
onclick="sortXML('date','ascending');">Date</a></th>
		<th><a href="#"
onclick="sortXML('location','ascending');">Location</a></th>
		<th><a href="#"
onclick="sortXML('number','ascending');">Number</a></th>
		<th><a href="#"
onclick="sortXML('duration','ascending');">Duration</a></th>
		<th><a href="#"
onclick="sortXML('charges','ascending');">Charges</a></th>
		</tr>

		<xsl:apply-templates select="//message">
		<xsl:sort select="$sortKey" order="$sortOrder"/>
		</xsl:apply-templates>

		</tbody>
		</table>
	</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>

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.