Problems passing xsl parameters from javascript

mxxz · November 1st, 2006, 06:39 PM

Hi

I am new to XML programming (1 week) and need to get this working ASAP. PLEASE ASSIST URGENTLY. My javascript code does not dynamically pass parameters to the xsl file. If I hard code the parameters, everything works. but when I try to access the parameters from dynamically, the parameters remain blank. HEEEELP

My code is below.

XML file (xml2.xml)
  <?xml version="1.0" encoding="ISO-8859-1" ?>
  <?xml-stylesheet type="text/xsl" href="./test2.xsl"?>
<CATALOG>
    <GENRE GENRENAME="POP">
         <CD PRODUCT="BONDS">
                 <TRADER>
                <TITLE>zEmpire Burlesque</TITLE>
                  <ARTIST>Bob Dylan</ARTIST>
                  <COUNTRY>USA</COUNTRY>
                  <COMPANY>Columbia</COMPANY>
                  <PRICE>10.90</PRICE>
                  <YEAR>1985</YEAR>
                 </TRADER>
            </CD>
        <CD PRODUCT="FRA">
                 <TRADER>
                  <TITLE>Soweto</TITLE>
                  <ARTIST>Mandoza</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>MTN</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
                <TRADER>
                  <TITLE>2JAzzSoweto</TITLE>
                  <ARTIST>2Mandoza</ARTIST>
                  <COUNTRY>2USA2</COUNTRY>
                  <COMPANY>2MTN</COMPANY>
                  <PRICE>210.902</PRICE>
                  <YEAR>219852</YEAR>
                 </TRADER>
        </CD>
          <CD PRODUCT="SWAPS">
                 <TRADER>
                  <TITLE>Poland</TITLE>
                  <ARTIST>Bob Dylan2</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>Columbia2</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
        </CD>
          <CD PRODUCT="TBILLS">
                 <TRADER>
                  <TITLE>South Africa</TITLE>
                  <ARTIST>TTT</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>VODAFONE</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
            </CD>
        </GENRE>
  <GENRE GENRENAME="JAZZ">
        <CD PRODUCT="BONDS">
                 <TRADER>
                  <TITLE>JAzzEmpire Burlesque</TITLE>
                  <ARTIST>Bob Dylan</ARTIST>
                  <COUNTRY>USA</COUNTRY>
                  <COMPANY>Columbia</COMPANY>
                  <PRICE>10.90</PRICE>
                  <YEAR>1985</YEAR>
                 </TRADER>
        </CD>
            <CD PRODUCT="FRA">
                 <TRADER>
                  <TITLE>JAzzSoweto</TITLE>
                  <ARTIST>Mandoza</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>MTN</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
                <TRADER>
                  <TITLE>2JAzzSoweto</TITLE>
                  <ARTIST>2Mandoza</ARTIST>
                  <COUNTRY>2USA2</COUNTRY>
                  <COMPANY>2MTN</COMPANY>
                  <PRICE>210.902</PRICE>
                  <YEAR>219852</YEAR>
                 </TRADER>
        </CD>
           <CD PRODUCT="SWAPS">
                   <TRADER>
                  <TITLE>JAzz</TITLE>
                  <ARTIST>Bob Dylan2</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>Columbia2</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
        </CD>
          <CD PRODUCT="TBILLS">
                 <TRADER>
                  <TITLE>JAzzSouth Africa</TITLE>
                  <ARTIST>TTT</ARTIST>
                  <COUNTRY>USA2</COUNTRY>
                  <COMPANY>VODAFONE</COMPANY>
                  <PRICE>10.902</PRICE>
                  <YEAR>19852</YEAR>
                 </TRADER>
            </CD>
    </GENRE>
</CATALOG>

XSL file (test2.xsl)
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
   <xsl:param name="genre"/>
   <xsl:param name="prodName"/>
<xsl:template match="*|@*">
     <xsl:copy>
      <xsl:apply-templates select="@* | * | comment() | processing-instruction() | text()" />
      </xsl:copy>
  </xsl:template>

  <xsl:template match="/">

<html>
<head>
   <script language="javaScript" src="submit.js"/>
</head>

      <body>

<form name="frm">



<Table>
<TR>
    <TD>SELECT TYPE</TD>
    <TD>
    <select name ="genre" onChange="submit('name')" id="select1">
    <option>ALL</option>
    <xsl:apply-templates select="CATALOG"/>
    </select>
     </TD>
    </TR>
    <TR>
        <TD>SELECT CD</TD>
    <TD>

    <select name ="prodName" onChange="javaScript:submit(this)" id="select2">
    <option>ALL CDs</option>

    <xsl:choose>
<xsl:when test="$genre='JAZZ'">
                <xsl:choose>
                <xsl:when test="CATALOG/GENRE[@GENRENAME=$genre]">
                    <option>Found</option>
                    <xsl:for-each select="CATALOG/GENRE[@GENRENAME=$genre]/CD">
                    <option value="{@PRODUCT}">
                            <xsl:attribute name = "value"><xsl:value-of select="@PRODUCT"/></xsl:attribute>
                            <xsl:value-of select="@PRODUCT"/>
                        </option>
                    </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                <option> <xsl:value-of select="$genre" /> </option>
                <option> <xsl:value-of select="." /> </option>
        <option> not found </option>
        </xsl:otherwise>
      </xsl:choose>

  </xsl:when>
<xsl:otherwise>
            <option>Jazz not selected</option>
            <option><xsl:value-of select="$genre"/></option>

   </xsl:otherwise>
  </xsl:choose>

    </select>
    </TD>
    </TR>
</Table>

  <xsl:call-template name="DisplayTraderList">
    <xsl:with-param name="ARTIST">TTT</xsl:with-param>
  </xsl:call-template>

  </form>
   </body>
</html>
  </xsl:template>

  <xsl:template match="CATALOG">
      <xsl:for-each select="GENRE">
    <option value="{@GENRENAME}">
            <xsl:attribute name = "value"><xsl:value-of select="@GENRENAME"/></xsl:attribute>
            <xsl:value-of select="@GENRENAME"/>
        </option>
    </xsl:for-each>
  </xsl:template>

    <xsl:template match="CATALOG/GENRE">
          <xsl:for-each select="CD">
    <option value="{TITLE}">
            <xsl:attribute name = "value"><xsl:value-of select="TITLE"/></xsl:attribute>
            <xsl:value-of select="TITLE"/>
        </option>
    </xsl:for-each>
  </xsl:template>

<xsl:template name="DisplayTraderList" match="CATALOG/GENRE/CD">
  <xsl:param name="ARTIST" />
   <table border="2" bgcolor="grey" visible="true">
      <tr>
        <th>Trader name</th>
        <th>Tel</th>
        <th>Reuters code</th>
        <th>Location</th>
      </tr>
            <xsl:for-each select="CATALOG/GENRE[@GENRENAME=$genre]/CD[@PRODUCT=$prodName]/TRADER">
        <tr>
     <td><xsl:value-of select="ARTIST" /></td>
     <td><xsl:value-of select="TITLE" /></td>
     <td><xsl:value-of select="COMPANY" /></td>
     <td><xsl:value-of select="YEAR" /></td>
             </tr>
  </xsl:for-each>
    </table>
  </xsl:template>

  <xsl:template match="CATALOG" mode="submit">
     <table width="80%" bgcolor="#FF8800">
     <tr><td>
      <xsl:value-of select="$genre"/>
        </td>
      </tr>
      </table>
  </xsl:template>

  </xsl:stylesheet>

javascript file(submit.js)

function submit(obj){
    try{
        var s = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
        var x = document.XMLDocument;
        if (x == null){
            x = navigator.XMLDocument;
            s.loadXML(navigator.XSLDocument.xml);
        }else{
            s.loadXML(document.XSLDocument.xml);
        }
        var tem = new ActiveXObject("MSXML2.XSLTemplate");
        tem.stylesheet = s;
        var proc = tem.createProcessor();

        //proc.addParameter("genre",frm.genre.options[frm.genre.selectedIndex].value);
        //proc.addParameter("prodName",frm.prodName.options[frm.prodName.selectedIndex].value);

        proc.addParameter("genre",'JAZZ');
        proc.addParameter("prodName",'FRA');

        proc.input = x;
        proc.transform();
        var str = proc.output;

        var newDoc = document.open("text/html");
        newDoc.write(str);
        navigator.XMLDocument = x;
        navigator.XSLDocument = s;
        newDoc.close();
    }catch(exception){
    }
}

mhkay · November 1st, 2006, 07:18 PM

You seem to be confused about the relationship of the XSLT to the Javascript.

You're invoking the transformation, I think, via the xml-stylesheet processing instruction. That doesn't supply any parameters to the XSLT. The XSLT runs, and it generates an HTML page, and the HTML page contains some Javascript. I'm not sure if this Javascript ever gets activated - I don't see anything in the HTML that triggers it - but even if it does, it obviously can't affect the transformation that's already taken place.

If you want to invoke a transformation with parameters, the approach is to write an HTML page which the user invokes; this contains some Javascript which is activated e.g. onLoad; this Javascript calls the transformation engine to do the transformation and update the display. You can't put the invoking program in its own output.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mxxz · November 2nd, 2006, 05:04 AM

Hi MHKAY

Thanks for the response. yes im very confused about how all of this fits together. At the bottom is the html page which has the javascript that does the transform.This page display drop down where if i change the options the submit function from submit.js is called.

<Table>
<TR>
    <TD>SELECT TYPE</TD>
    <TD>
    <select name ="genre" onChange="submit('name')" id="select1">
    <option>ALL</option>
    <xsl:apply-templates select="CATALOG"/>
    </select>
     </TD>
    </TR>
    <TR>
        <TD>SELECT CD</TD>
    <TD>

when I select an item in the drop down, the value of what I have seleted is appended as a querystring in the URL.

HTM file

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="Unregistered User">
  <meta name="generator" content="AceHTML Freeware">
</head>

<script language="javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("C:/Projects/Traders portal/xml_note.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("C:/Projects/Traders portal/delete.xsl")

// Transform
document.write(xml.transformNode(xsl))

</script>
</html>

mxxz · November 2nd, 2006, 12:32 PM

I have tried this code sample and still have the same problem where the parameters are not appearing. Please help. I hard coded the parameter values in the HTML page and transforming in the HTML page. I think this is what you were saying in the answer. If you have a sample code I can try please advice.

xml----------------------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
   <cd>
    <title>zEmpire Burlesque</title>
    <artist>zBob Dylan</artist>
    <country>zUSA</country>
    <company>zColumbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>

</catalog>

XLS-------------------------------------------------------

?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">
<xsl:param name="genre"/>
<xsl:param name="prodName"/>
  <html>
  <body>
    <h2>My CD Collection</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th>
        <th align="left">Artist</th>
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title" /></td>
        <td><xsl:value-of select="artist" /></td>
      </tr>
      </xsl:for-each>
  </table>

  <table border="1">
      <tr bgcolor="#9acd32">
      <th align="left">Var</th>
      </tr>
      <tr>
      <td>
              <xsl:value-of select="$genre"/>
      </td></tr>
      <tr>
      <td>
              Test
      </td></tr>
      </table>
  </body>
  </html>
</xsl:template></xsl:stylesheet>

HTML-------------------------------------------------------

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="Unregistered User">
  <meta name="generator" content="AceHTML Freeware">

<script language="javascript">
function loadData()
{

// Load XML
var xml = new ActiveXObject("MSXML2.DomDocument.3.0");
xml.async = false
xml.load("C:/Projects/Traders portal/test3.xml")

// Load the XSL
var xsl = new ActiveXObject("MSXML2.FreeThreadedDomDocument.3.0" );
xsl.async = false
xsl.load("C:/Projects/Traders portal/test3.xsl")

// Transform
//document.write(xml.transformNode(xsl))
var template = new ActiveXObject("MSXML2.XSLTemplate")
  template.stylesheet = xsl
  processor = template.createProcessor()

  processor.input = xml

  processor.addParameter("genre", 'Jazz')
  processor.addParameter("prodName", 'FRA')
  processor.transform()

  document.open()
  document.write(processor.output)
  document.close()
}

</script>
<body id='updateTarget' onLoad="javascript:loadData()">

  </body>

joefawcett · November 3rd, 2006, 11:21 AM

If you want to assign parameters externally they must be global, this means you must move them outside of the xsl:template and make them children of xsl:stylesheet.

--

Joe (Microsoft MVP - XML)