Performing transformations

This page discusses - Performing transformations

Performing transformations

Performing transformations

     

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.