how to supply stylesheet variable value from html or javascript

Question

My issue is regarding rendering on client that uses xsl. This already works in IE but I want to make it work on firefox

First, the stylesheet (variablexsl.xsl) The only thing special here is the existence of

<xsl:variable name="module" select="string('RES')"/>

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <xsl:variable name="module" select="string('RES')"/>
        <table cellpadding="0" cellspacing="0" border="0" ID="randomID">
            <tr>
                <xsl:choose>
                    <xsl:when test="$module = 'EDU'">
                        <td>EDU was supplied..</td>
                    </xsl:when>
                </xsl:choose>
            </tr>
            <tr>
                <xsl:choose>
                    <xsl:when test="$module = 'RES'">
                        <td>RES was supplied..</td>
                    </xsl:when>
                </xsl:choose>
            </tr>
        </table>
    </xsl:template>
</xsl:stylesheet>

Now, the html file index.html

<html>
<head>
    <script>
        function selectmTab(args) {
            var xml = loadXMLDoc("variabledata.xml"); //ajax call and holds the responseXML. variabledata.xml is empty
            var xsl = loadXMLDoc("variablexsl.xsl");  //ajax call and holds the responseXML
            var ss2 = xsl.selectSingleNode('//xsl:variable/@select');
            ss2.value = "string('" + args + "')";
            document.getElementById("xsltest").innerHTML = xml.transformNode(xsl);
        }
    </script>
</head>
<body onload="displayResult()">
    <div>
    <input type="button" value="EDU" onclick="selectmTab('EDU');" />
    <input type="button" value="RES" onclick="selectmTab('RES');" />
    </div>
    <div id="xsltest"></div>
</body>
</html>

so finally when i click the buttons EDU and RES, the text is getting displayed properly in IE but not in any other browser. I tried to using document.evaluate() but kept getting errors.. and finally turned to SO for help!

Thanks!

Solution: Making the following changes to the stylesheet, and then using the xsltprocessor().setParameter worked for me.

Changes to the Stylesheet: (Addition of a new xsl:param right after the stylesheet declaration)

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:param name="winnersOnly">RES</xsl:param>

And, then modifying the <xsl:variable> declaration right after <xsl:template match="/"> as follows:

<xsl:template match="/">
<xsl:variable  name="module" select="$winnersOnly"/>

Client Code for firefox

//function loadXMLDoc() makes an ajax request using the XMLHttpRequest object, and returns the responseXML to the caller.

var processor = new XSLTProcessor();
xslholder = loadXMLDoc("styles.xsl");
processor.importStylesheet(xslholder);
processor.setParameter(null, "winnersOnly", "EDU"); //setting the value here
xmlholder = loadXMLDoc("data.xml");
var ownerDocument = document.implementation.createDocument("", "test", null);
var newFragment = processor.transformToFragment(xmlholder, ownerDocument);
document.getElementById("fragment").appendChild(newFragment);

Note that your creation of a temporary document for `transformToFragment` is not necessary; simply do e.g. `var targetEl = document.getElementById("fragment"); var newFragment = processor.transformToFragment(xmlholder, targetEl.ownerDocument); targetEl.appendChild(newFragment);`. — Martin Honnen, Mar 09 '12 at 12:47

score 1 · Accepted Answer · answered Mar 08 '12 at 12:06

Well XSLT has a well-defined mechanism to pass external parameters to an XSLT stylesheet, namely by putting top level xsl:param elements within the stylesheet to define the name of the external parameters (and also default values if needed) and then by using the XSLT processor's API to set the parameters before running a transformation.

For Mozilla, Opera, Safari, Chrome you can use the same API: https://developer.mozilla.org/en/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations#Setting_parameters.

For IE which uses MSXML you need to use the corresponding MSXML API: http://msdn.microsoft.com/en-us/library/ms762312%28v=vs.85%29.aspx.

how to supply stylesheet variable value from html or javascript

1 Answers1