xsl-list
[Top] [All Lists]

RE: Using javascript to pass a parameter to XSL

2005-03-17 13:45:09
Thank you so much, Pieter and Joe!

Maria 

-----Original Message-----
From: Pieter Reint Siegers Kort 
[mailto:pieter(_dot_)siegers(_at_)elnorte(_dot_)com] 
Sent: Thursday, March 17, 2005 2:21 PM
To: xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com
Subject: RE: [xsl] Using javascript to pass a parameter to XSL

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(_at_)to(_dot_)epost(_dot_)ca]
Sent: Jueves, 17 de Marzo de 2005 12:00 p.m.
To: xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com
Subject: RE: [xsl] 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(_dot_)siegers(_at_)elnorte(_dot_)com]
Sent: Thursday, March 17, 2005 12:42 PM
To: xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com
Subject: RE: [xsl] 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(_at_)to(_dot_)epost(_dot_)ca]
Sent: Jueves, 17 de Marzo de 2005 11:12 a.m.
To: xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com
Subject: [xsl] 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>





--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--



<Prev in Thread] Current Thread [Next in Thread>