XSLT with JQuery <xsl:jquery>

As we learn XSLT in previous chapter about transforming XML document into XHTML format which display in browser, here we are going to learn how we can use jquery and JavaScript to transform XML document into XHTML. In previous chapters, we have used XSL style sheet to transform it, here we will use java script with XML document to transform it into XHTML.

Since XSLT is browser based solution, and browser based solution depend on browser to transform it so it is not an advisable to use that solution. Javascript solution work on client side with scripting and activex object which is used to transform XML document and its ideal solution for all the browsers.

The JavaScript based solution is ideal to implement to do transformation because you can test in different browser and update script if needed. It also helps you that you can use different style sheets as per your needs.

Note: XML document doesn’t have any reference from XSLT file so you can create number of XSLT document as per your need to transform it into XHTML.

Let’s take previous example to understand and transform it into XHTML via JavaScript.

Syntax:

<?xml version="1.0" encoding="UTF-8"?>
<products>
  <product>
    <name>Sony Xperia R1 Dual</name>
    <color>Silver</color>
    <price>$650.00</price>
    <discount>$20.00</discount>
  </product>
  <product>
    <name>Sony Large P1</name>
    <color>White</color>
    <price>$750.00</price>
    <discount>$30.00</discount>
  </product>
  <product>
    <name>Sony Xperia XP1</name>
    <color>Gold</color>
    <price>$850.00</price>
    <discount>$40.00</discount>
  </product>
  <product>
    <name>Sony Xperia XP1 Latest 2018</name>
    <color>Black</color>
    <price>$950.00</price>
    <discount>$50.00</discount>
  </product>
</products>

XSLT:

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
  <span style="font-size:25px; font-weight:bold;">Products</span>
   <table cellpadding="5" cellspacing="5" border="1" style="border:solid 1px silver;">
    <tr bgcolor="silver">
     <th>Name</th>
     <th>Color</th>
     <th>Price</th>
     <th>Discount</th>
    </tr>
    <xsl:for-each select="products/product">
     <tr>
     <td><xsl:value-of select="name" /></td>
     <td><xsl:value-of select="color" /></td>
     <td><xsl:value-of select="price" /></td>
     <td><xsl:value-of select="discount" /></td>
     </tr>
    </xsl:for-each>
   </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

JavaScript:

<!DOCTYPE html> <html>
<head>
<script>
function loadXMLFile(strFile)
{
if (window.ActiveXObject)
 {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
else
 {
  xhttp = new XMLHttpRequest();
 }
xhttp.open("GET", strFile, false);
try {xhttp.responseType = "msxml-document"} catch(err) {}
xhttp.send("");
return xhttp.responseXML;
}

function DisplayXMLData()
{
strxml = loadXMLFile("products.xml");
strxsl = loadXMLFile("products.xsl");
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
 {// Support for IE browser
  ex = xml.transformNode(strxsl);
  document.getElementById("dvXMLData").innerHTML = ex;
 }

else if (document.implementation && document.implementation.createDocument)
 {// Support for other browsers
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(strxsl);
  displayDocument = xsltProcessor.transformToFragment(strxml, document);
  document.getElementById("dvXMLData").appendChild(displayDocument);
 }
}
</script>
</head>
<body>
<input id="btnLoad" type="button" value="Load Data" onclick="DisplayXMLData()" />
<div id="dvXMLData" />
</body>
</html>

Output:

In above example, we have taken 3 files to execute this example.

  • We have created two method to execute and display result called “loadXMLFile()” and “DisplayXMLData()” in above example.
  • To get response from server, we have used XMLHttpRequest object with open() and send() methods to send request to a server.
  • Received the response from the server in XML format.
  • Created XSLTProcessor object which access and import XSL file into that. Then used transformToFragment() method which is used to set XSL style sheet to XML document. Finally assign styled document into division as inner html text which render final output.
  • We also used transformNode() method to do same thing because other one doesn’t support into IR browsers.
  • Now, we learned how to use XSLT with XML document using JavaScript and transform that into XHTML in this chapter. We will learn more about how we can handle same thing in server side by using C# in next chapter.