Applying jQuery in XSLT -
i want apply jquery in xslt. jquery function below:
$('.expand').click(function() { $('ul', $(this).parent()).eq(0).toggle(); }); ul li ul { display: none; } how can apply below xslt code:
<xsl:template match="product/auto"> <ul> <li> <a class="expand">john</a> </li> <xsl:apply-templates select='admin'/> </ul> </xsl:template> <xsl:template match="admin"> <ul> <li> <a class="expand">admin</a> </li> <xsl:apply-templates select=subject> </ul> </xsl:template> <xsl:template match="subject"> <ul> <li> <a class="expand"> <xsl:value-of select="concat('subject : ',.)"/> </a> </li> </ul> </xsl:template> i tried below; calling jquery in xslt , including function in cdata
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/"> <html lang="en"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> <![cdata[ $('.expand').click(function() { $('ul', $(this).parent()).eq(0).toggle(); }); ul li ul { display: none; } ]]> </script> </head> <body> <h1></h1> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="product/auto"> <ul> <li> <a class="expand">john</a> </li> <xsl:apply-templates select='*'/> </ul> </xsl:template> <xsl:template match="admin"> <ul> <li> <a class="expand">admin</a> </li> </ul> </xsl:template> <xsl:template match="subject"> <ul> <li> <a class="expand"> <xsl:value-of select="concat('subject : ',.)"/> </a> </li> </ul> </xsl:template> </xsl:stylesheet> html gerenrated afer running page below
<ul> <li><a class="expand">john</a></li> <ul> <li><a class="expand">admin</a></li> </ul> </ul>
moved style out of script block below
<style> ul li ul { display: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> <![cdata[ $('.expand').click(function() { $('ul', $(this).parent()).eq(0).toggle(); }); ]]> </script>
i'm not 100% sure you're trying do, think error jquery selector rather xslt. $('ul', $(this).parent()) try match <ul> in scope of clicked element's immediate parent, enclosing <li> element, hence no match.
try using closest instead:
$('.expand').click(function() { $(this).closest('ul').toggle(); }); i'm not sure why you've got eq(0) in there either, may missing something.
Comments
Post a Comment