0

Let's say I have the following XML file..

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

    <test>
        <id>test_value1</id>
        <value>1</value>
    </test>

    <test>
        <id>test_value2</id>
        <value>2</value>
    </test>

</products>

And the following XSLT file..

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
    <xsl:template match="/">

        <xsl:for-each select="products/test">
            <xsl:if test="id='test_value1'">
                 <a href="#"> Hello #{value} </a>
            </xsl:if>
        </xsl:for-each>

    </xsl:template>
</xsl:stylesheet>

And I'm loading this data into a HTML page using the following code..

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
             if (window.ActiveXObject) {
                 xmlhttp = new ActiveXObject("Microsoft.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 displayXMLDoc(xml_file, xsl_file, element_id) {
             xml = loadXMLDoc(xml_file);
             xsl = loadXMLDoc(xsl_file);

             // BROWSER IS IE / EDGE.
             if (window.ActiveXObject) {
                 ex = xml.transformNode(xsl);
                 document.getElementById(element_id).innerHTML = ex;
             }
             // BROWSER IS MOZILLA, FIREFOX, OPERA, ETC.
             else if (document.implementation && document.implementation.createDocument) {
                 var xsltProcessor = new XSLTProcessor();
                 xsltProcessor.importStylesheet(xsl);
                 var resultDocument = xsltProcessor.transformToFragment(xml, document);
                 document.getElementById(element_id).appendChild(resultDocument);
             }
         }

         function toDisplay(){
             displayXMLDoc('test.xml', 'test.xsl', 'test_output');
         }

      </script>
   </head>
   <body onload="toDisplay()">
      <div id="test_output"></div>
   </body>
</html>

How can I pass a value from HTML into the XSLT file so that the test_value1 in <xsl:if test='id='test_value1'"> is equal to the value passed from HTML, using JavaScript?

For example, if I wanted to load the second tag values using the same code found here, how would I do it?

My current thought process would be that I could assign the id as an id='' tag in the XSLT, but I'm unsure of how to load the data from HTML.

TheAuzzieJesus
  • 587
  • 9
  • 23
  • `XMLHttpRequest` returns asynchronous results – guest271314 Aug 10 '16 at 03:13
  • Is there an alternative to XMLHttpRequest that I can use that would work in my situation? – TheAuzzieJesus Aug 10 '16 at 03:15
  • Possible duplicate of [How to pass parameter to XSLT from Javascript function](http://stackoverflow.com/questions/29124455/how-to-pass-parameter-to-xslt-from-javascript-function) – Jacob Aug 10 '16 at 03:16
  • Just read over this question. While it is very similar to my question posed here, I'm struggling to adapt it to my context. – TheAuzzieJesus Aug 10 '16 at 03:39
  • What value are you trying to pass from `html` to `xsl` ? Note, closing `` tag is missing `/`, e.g., `` – guest271314 Aug 10 '16 at 03:49
  • My aim is to use the same XSLT file for multiple products found in a XML file. To do this however, I require a value to be transferred from HTML to XSLT so that I know which product to load data for. Specifically, I wish to pass the ID from the XML when loaded into HTML, into the XSLT file by using Javascript. If I don't find a solution to this, I am going to have to create multiple XSLT files and HTML files to call the functions for each one of the products to display the data. Also, cheers! Fixed `` tag – TheAuzzieJesus Aug 10 '16 at 03:54
  • Do you mean change value at `test="id='test_value1'"`? Or display value of `` if `` is `test_value1`? See http://plnkr.co/edit/QWsOBmoj4MBl5utApIEh?p=preview – guest271314 Aug 10 '16 at 04:03
  • I believe the value at test="id='test_value1'"? would change to the value I am trying to retrieve from HTML. The more I look into it, the more the solution posted by @Jacob is seeming like my best bet. – TheAuzzieJesus Aug 10 '16 at 04:07
  • _"I believe the value at test="id='test_value1'"? would change to the value I am trying to retrieve from HTML"_ Not certain which value you are trying to retrieve from `html`? _"The more I look into it, the more the solution posted by @Jacob is seeming like my best bet."_ Yes, probably. Adjusted `loadXMLDoc` function to return a `Promise`, and used `Promise.all()` at `displayXMLDoc` to process asynchronous result returned from `XMLHttpRequest()` at plnkr http://plnkr.co/edit/QWsOBmoj4MBl5utApIEh?p=preview – guest271314 Aug 10 '16 at 04:10
  • In terms of XSLT you simply need to define an `xsl:param`, in terms of Javascript you then need to use `setParameter` for Mozilla, Chrome, Safari and Edge on the `XSLTProcessor` object, as shown in http://stackoverflow.com/a/29124870/252228. For IE you need different Javascript code, but that is also shown in the other answer. – Martin Honnen Aug 10 '16 at 11:19

0 Answers0