Performing transformations

Given below the code for transforming xml and xsl into text string.

XSLT.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            <html>

            <head>

            <title>XSLT Test</title>

            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

            </head>

            <body>

            

            XML:<br />

            <div style="height: 150px; border: 1px solid #000000; overflow: scroll;">

            <pre id="xmldata">

            </pre>

            </div>

            

            <br />

            

            XSLT:<br />

            <div style="height: 150px; border: 1px solid #000000; overflow: scroll;">

            <pre id="xsldata">

            </pre>

            </div>

            <br />

            

            Output:<br />

            <div style="height: 150px; border: 1px solid #000000; overflow: scroll;">

            <div id="output" style="padding: 2px;">

            

            </div>

            </div>

            <br />

            

            <script type="text/javascript" src="jquery-1.4.2.js"></script>

            <script type="text/javascript" src="jquery.xslt.js"></script>

            <script type="text/javascript">

            $(function() {

            // For display purposes only

            $.ajax({

            url: 'xslt-test.xml',

            dataType: 'html',

            success: function(data) {

            $('#xmldata').text(data);

            }

            });

            

            $.ajax({

            url: 'xslt-test.xsl',

            dataType: 'html',

            success: function(data) {

            $('#xsldata').text(data);

            }

            });

            

            // The transformation

            $('#output').xslt({xmlUrl: 'xslt-test.xml', xslUrl: 'xslt-test.xsl'});

            });

            </script>

            

            </body>

            </html>

xslt-test.xml

<?xml version="1.0" encoding="ISO-8859-1"?> <page> <message> Hello World. </message> </page>

xslt-test.xsl

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet> <xsl:template match="/"> <xsl:apply-templates select="page/message"/> </xsl:template> <xsl:template match="page/message"> <div style="color:green"> <xsl:value-of select="."/> </div> </xsl:template> </xsl:stylesheet>

OUTPUT :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Related Tags for Performing transformations:

«Previous Index Next»