Hi!
I am newb to Jquery and XSLT. I have been trying a proto which transformes xml using xslt. I've been using jquery since I started with HTML proto.
jquery functions are not fired for <DIV> tags generated using XSLT tranformation. But they are fired for HTML own DIV tags.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>XSLT Examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="./include/css/cofee_2.css" rel="stylesheet" type="text/css" />
<link href="./include/css/themeBFB.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./include/jquery.js"></script>
<script type="text/javascript" src="./include/cofee_2.js"></script>
<script type="text/javascript" src="./include/tipsy.js"></script>
<script language="javascript" src="./include/xmlxslt-loader.js"></script>
<script language="javascript">
var xml;
var displayXML = function() { displayElement(transformXML(xml, "order_template.xslt")); return false; };
var initPage = function()
{
xml = loadXMLDoc("custaccountdata.xml")
displayXML();
}
var displayElement = function(fragment, el)
{
if(el == undefined)
el = "output";
outputEl = document.getElementById(el);
while(outputEl.hasChildNodes())
outputEl.removeChild(outputEl.firstChild);
outputEl.appendChild(fragment);
}
$(document).ready(function() {
$('#custcheck').click(function() {
alert('checbox clicked');
});
});
</script>
</head>
<body onLoad="initPage()">
<div id="output"></div>
</body>
</html>
XSLT:
<xsl:template match="/mainsection">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="./include/jquery.js"></script>
<script type="text/javascript" src="./include/cofee_2.js"></script>
<script type="text/javascript" src="./include/tipsy.js"></script>
<script language="javascript" src="./include/xmlxslt-loader.js"></script>
</head>
<body>
<form>
<div class="trigger" id="colapp11"><input type="checkbox" id="custcheck" value="custt"/><xsl:value-of select="@label"/></div>
<div class="toggle_container">
<div class="block">
<xsl:apply-templates select="section">
</xsl:apply-templates>
</div>
</div>
</form>
</body>
</html>
</xsl:template>
<xsl:template match="section">
<div class="trigger" ><a href="javascript:void(0);"><span><xsl:value-of select="@label"/></span></a></div>
<div class="toggle_container">
<div class="indent">
<xsl:apply-templates select="section">
</xsl:apply-templates>
<xsl:apply-templates select="field">
</xsl:apply-templates>
</div>
</div>
</xsl:template>
<xsl:template match="field">
<table border="0" cellspacing="0" cellpadding="0" id="test">
<tr>
<td valign="top">
<xsl:value-of select="@label"/>
</td>
<td valign="top">
<xsl:value-of select="@value"/>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
Script for XSL transformation:
function loadXMLDoc(fname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle the XML Transformation functions of this script (needed either Microsoft.XMLDOM or document.implementation.createDocument');
}
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
function transformXML(xml, xslt)
{
if(typeof xml == 'string')
xml=loadXMLDoc(xml);
if(typeof xslt == 'string')
xsl=loadXMLDoc(xslt);
// code for IE
if (window.ActiveXObject)
{
var el = document.createElement('div');
ex=xml.transformNode(xsl);
el.innerHTML = ex;
return el;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
return resultDocument;
}
else
{
alert('Your browser cannot handle the XML Transformation functions of this script (needed either Microsoft.XMLDOM or document.implementation.createDocument');
}
}
Am I going wrong anywhere? Plz help me.
Thanks,
Priyakat