Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

html - How to pass parameter to XSLT from Javascript function

I have scoured through numerous posts that try and explain how to achieve this, however none have helped me solve the problem.

I have a HTML file which contains an XML parsing JavaScript function which in turn renders the XSLT file. The issue is, I have multiple 'records' in my XML file and I only want a single XSLT to render each of records (instead of a separate XSLT file per record). Based on the code below, please could someone advise on how I can pass a parameter from JavaScript containing the record id (in each XML record in my XML file) so that the 'single' XSLT can parse the layout with the correct data sourced from the parameter.

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
      <title>Weather App</title>

      <link href="../../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
      <link href="../../css/animate.css" type="text/css" rel="stylesheet" />
      <link href="../../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    </head>

    <body>

      <div id="WeatherDetailsContainer"></div>

      <!--  Scripts-->
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../js/materialize.js"></script>

      <script>

        $(function(){
          RenderXSLT();
        });

        function loadXMLDoc(filename) {
          if (window.ActiveXObject) {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
          } else {
            xhttp = new XMLHttpRequest();
          }
          xhttp.open("GET", filename, false);
          try {
            xhttp.responseType = "msxml-document"
          } catch (err) {} // Helping IE11
          xhttp.send("");
          return xhttp.responseXML;
        }

        function RenderXSLT() {
          xml = loadXMLDoc("datastore/Weather.xml");
          xslt = loadXMLDoc("transformations/WeatherDetailsCard.xslt");
          var currentLocation = localStorage.getItem('current_weather_location');

          if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
            ex = xml.transformNode(xslt);
            document.getElementById("WeatherDetailsContainer").innerHTML = ex;
          }
          else if (document.implementation && document.implementation.createDocument) {
            xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xslt);

            /** I believe this is how to set the param, but it didn't work **/
            //xsltProcessor.setParameter(null, "cityname", currentLocation);

            resultDocument = xsltProcessor.transformToFragment(xml, document);
            document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
          }
        }
      </script>

    </body>
    </html>

XML File

<?xml version="1.0" encoding="UTF-8" ?>
<locations>

  <location>
    <cityid>Lon</cityid>
    <cityname>London</cityname>
    <temperature>11</temperature>
    <high>13</high>
    <low>4</low>
    <date>17/03/2015</date>
  </location>

  <location>
    <cityid>Man</cityid>
    <cityname>Manchester</cityname>
    <temperature>07</temperature>
    <high>08</high>
    <low>2</low>
    <date>17/03/2015</date>
  </location>

  <location>
    <cityid>Gla</cityid>
    <cityname>Glasgow</cityname>
    <temperature>05</temperature>
    <high>06</high>
    <low>1</low>
    <date>17/03/2015</date>
  </location>

</locations>

XSLT File

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname='London']">

      <div class="section">
        <div class="container">
          <div class="row">
            <div class="col s4 m4 l4">
              <div class="card-panel z-depth-3 animated fadeInUp" style="padding:10px 10px 5px 10px !important;">
                <span class="center-align">
                  <h5><xsl:value-of select="cityname"/></h5><span> (<xsl:value-of select="cityid"/>)</span>
                </span>
                <p>Temp: <xsl:value-of select="temperature"/></p>
                <p>High: <xsl:value-of select="high"/></p>
                <p>Low: <xsl:value-of select="low"/></p>                
              </div>
            </div>
          </div>
        </div>
      </div>

    </xsl:for-each>

</xsl:template>
</xsl:stylesheet>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

In the XSLT you need to change

<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname='London']">

to

<xsl:param name="cityname"/>

<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname = $cityname]">

I would also set <xsl:output method="html"/> as you are only creating a fragment of HTML and the XSLT processor does not know that if you don't set the output method.

In your Javascript code for Mozilla, Chrome, Opera I would change the check

      else if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslt);

        /** I believe this is how to set the param, but it didn't work **/
        //xsltProcessor.setParameter(null, "cityname", currentLocation);

        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
      }

to

      else if (typeof XSLTProcessor !== 'undefined') {
        var xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslt);


        xsltProcessor.setParameter(null, "cityname", currentLocation);

        var resultFragment = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("WeatherDetailsContainer").appendChild(resultFragment);
      }

Your IE code with transformNode does not allow to set parameters, you will need to change that part as well, change

      if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        ex = xml.transformNode(xslt);
        document.getElementById("WeatherDetailsContainer").innerHTML = ex;
      }

to

      if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        var template = new ActiveXObject('Msxml2.XslTemplate');
        template.stylesheet = xslt;
        var proc = template.createProcessor();
        proc.input = xml;
        proc.addParameter('cityname', currentLocation);
        proc.transform();
        document.getElementById("WeatherDetailsContainer").innerHTML = proc.output;
      }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...