Applying appendTo for adding a sort node to apply-template

Question

I am trying to programmtically insert an appendTo() method with jquery. I have a formatting stylesheet which formats an xml sheet, but I do it in a third HTML document using jquery and javascript. My original xml is in this format:

<guitars>
    <guitar>
        <model>AStrat</model>
        <year>1978</year>
        <name>Strat</name>
        <price>2500</price>
    </guitar>
</guitars>

and my stylesheet is like this:

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

    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>

    <xsl:template match="/">
        <table id="guitarTable" border="1" width="200">
            <tr class="header">
                <th>Model</th>
                <th>Year</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
            <xsl:apply-templates select="/guitars/guitar">
            </xsl:apply-templates>
        </table>
    </xsl:template>

    <xsl:template match="guitar">
        <tr>
            <td> <xsl:value-of select="model" /> </td>
            <td> <xsl:value-of select="year" />  </td>
            <td> <xsl:value-of select="name"/> </td>
            <td> <xsl:value-of select="price" /> </td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

And here is my javascript. stylesheet is the stylesheet above imported via ajax and I've checked works correctly.

var nodeToAppend = '<xsl:sort select="model" data-type="text"/>'
$(nodeToAppend).appendTo( $(stylesheet)
                              .find("xsl\\:apply-templates, apply-templates")
                              .first() );

But this doesn't seem to want to take. Later on, I apply the XSL to the XML via an XSLT processor. Any ideas what I'm doing wrong? Basically I want this line:

<xsl:apply-templates select="/guitars/guitar">
                </xsl:apply-templates>

to become:

<xsl:apply-templates select="/guitars/guitar">
          <xsl:sort select="model" data-type="text"/>
</xsl:apply-templates>

Thanks!

score 1 · Answer 1 · answered Mar 18 '17 at 14:23

You can simply define a global parameter <xsl:param name="sort-key"/> in the XSLT and then have

        <xsl:apply-templates select="/guitars/guitar">
          <xsl:sort select="*[local-name() = $sort-key]"/>
        </xsl:apply-templates>

then, instead of manipulating the XSLT code each time you need to change that key, you would simply set the parameter differently e.g. given var proc = new XSLTProcessor(); with an imported stylesheet you can then set e.g. proc.setParameter('', 'sort-key', 'model'); before running the next transformation. There is no need to manipulate the XSLT stylesheet.

Thanks for the reply, that would work. Unfortunately due to my requirements I was forced to get my result by dynamically altering the XSLT. — NateH06, Apr 05 '17 at 16:03

score 0 · Answer 2 · answered Mar 17 '17 at 20:12

XSLT

      <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>

      <xsl:template match="/">
          <table id="guitarTable" border="1" width="200">
              <tr class="header">
                  <th>Model</th>
                  <th>Year</th>
                  <th>Name</th>
                  <th>Price</th>
              </tr>
              <div id="append_here">
              <xsl:apply-templates select="/guitars/guitar">
              </xsl:apply-templates>
              </div>
          </table>
      </xsl:template>

      <xsl:template match="guitar">
          <tr>
              <td> <xsl:value-of select="model" /> </td>
              <td> <xsl:value-of select="year" />  </td>
              <td> <xsl:value-of select="name"/> </td>
              <td> <xsl:value-of select="price" /> </td>
          </tr>
      </xsl:template>

  </xsl:stylesheet>

jquery

//<xsl:apply-templates><![CDATA[
  $(function() {
    $("div#append_here" ).children().append('<xsl:sort select="model" data-type="text"/>');
  });
//]]></xsl:apply-templates>

JSFIDDLE

Unfortunately, that's not doing it. I think the problem may be this `$("div#append_here" )` . Both in your version and mine, the jquery isn't successfully targeting the external xsl document. — NateH06, Mar 18 '17 at 12:57
I did find a hack around it. Unfortunately it doesn't involve any of the `append` methods. In the original xsl sheet, I have this: ` ` and then I simply am using this in my html page: `$(stylesheet).find("xsl\\:sort, sort").first().attr("select", sortByElement);` where `sortByElement = ` model, year, price, etc. — NateH06, Mar 18 '17 at 13:27

Applying appendTo for adding a sort node to apply-template

2 Answers2