Your Search Results

    Advanced Example

    This article is in need of a technical review.

    Advanced Example

    The advanced example will sort several divs based on their content. The example allows to sort the content multiple times, alternating between ascending and descending sorting. The JavaScript only loads the .xsl file the first time, and sets the xslloaded variable to true once it has finished loading the file. Using the getParameter method on the XSLTProcessor object, the code can figure wether to sort by ascending or descending. It defaults to ascending if the parameter is empty (first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using setParameter.

    The XSLT file has a parameter called myOrder that JavaScript sets to change the sorting method. The xsl:sort element's order attribute can access the value of the parameter using $myOrder. However, the value needs to be an XPATH expression and not a string, so {$myOrder} is used. Using {} evaluates the content as an XPath expression.

    Once the transformation is complete, the result is appened to the document, as shown in this example.

    Figure 7 : Sorting based on div contentview example

    // XHTML Fragment:
    <div id="example">
    // JavaScript
    var xslRef;
    var xslloaded = false;
    var xsltProcessor = new XSLTProcessor();
    var myDOM;
    var xmlRef = document.implementation.createDocument("", "", null);
    function sort() {
      if (!xslloaded){
        p = new XMLHttpRequest();"GET", "example2.xsl", false);
        xslRef = p.responseXML;
        xslloaded = true;
      // create a new XML document in memory
      xmlRef = document.implementation.createDocument("", "", null);
      // we want to move a part of the DOM from an HTML document to an XML document.
      // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
      var myNode = document.getElementById("example");
      var clonedNode = xmlRef.importNode(myNode, true);
      // after cloning, we append
      // set the sorting parameter in the XSL file
      var sortVal = xsltProcessor.getParameter(null, "myOrder");
      if (sortVal == "" || sortVal == "descending")
        xsltProcessor.setParameter(null, "myOrder", "ascending");
        xsltProcessor.setParameter(null, "myOrder", "descending");
      // initiate the transformation
      var fragment = xsltProcessor.transformToFragment(xmlRef, document);
      // clear the contents
      document.getElementById("example").innerHTML = "";
      myDOM = fragment;
      // add the new content from the transformation
    // XSL Stylesheet:
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns="" xmlns:html="" xmlns:xsl="">
      <xsl:output method="html" indent="yes" />
      <xsl:param name="myOrder" />
      <xsl:template match="/">
        <xsl:apply-templates select="/div//div">
          <xsl:sort select="." data-type="number" order="{$myOrder}" />
      <xsl:template match="div">
        <xsl:copy-of select="." />

    Document Tags and Contributors

    Contributors to this page: trevorh, Brettz9, Fredchat, JdeValk, Interfaced, MrTim
    Last updated by: MrTim,