In the previous post we went over the basics of AJAX and how to call and use the XMLHTTPRequest object. In this post we are going to go over how to write the javascript calls in our xsl code, with out it getting messy and blowing up on us. Believe me nothing is worst then getting the the document is not well formed error message when you're working with XSL.

Links

One of the easiest ways I've found to use javascript in xsl is to call the javascript is from a link or <a href=""> tag. Let's just say you have a javascript function you want to use called getContentById(id). This function loads a div tag with the content from the function, that is pulling the data through the XMLHTTPRequest object. So how are we going to call this function. It's pretty easy actually all we have to do to invoke this function is to pass it an ID from the XML node then it'll get the content from that node. So how do we set in that node id when we are dynamically looping through the xml. There are a couple of ways of doing this. I find using XSL Attributes to be the easiest way to accomplish this task.  So lets look at the code that would call our javascript and use XSL Attributes.

<?xml version="1.0" standalone="yes"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" version="4.0" media-type="text/html" />
<xsl:template match="/">
<div id="wrapper">
<ul>
<xsl:for-each select="site/content">
<li><a>
<xsl:attribute name="href">javascript:getContentByID('<xsl:value-of select="@id" />');</xsl:attribute>
<xsl:value-of select="question" />
</a>
</li>
</xsl:for-each>
</ul>
</div>
</xsl:template>
</xsl:stylesheet>

So lets go over what the XSL is doing. At the <xsl:template> it matches the root XML Node to start applying the style. Then it creates a <div> tag that is the wrapper for applying style. Next it creates a <ul> tag to start the ordered list. Next is our for-each statement. So for every instance of the content node with in the site node, it creates a open <li> builds a link, and in the link sets the "href" for the link to "javascript:getContentByID('1');" for the first node, and just increments from there depending on the content nodes id attribute. Now when this link is click the Javascript is invoked. It finishes up by closing up the </a> tag and the </li> tag, then it finishes with the for-each and closes the </ul> tag and the <div> wrapper tag.

So were is the Javascript. You many be thinking, well you've shown me how to call the javascript, but where is the actual javascript.  Well It's on the page that calls the XSL XML Transform. You see, the XML/XSL/XSLT complaint web browsers are still doing things a little different. So because of that I do my XSL transform on the server side. So I just calling my javascript on that page, and then call in the function that transforms the XML/XSL. I hope you've found this useful. If you'd like to see an example of a XML/XSL transform in Classic ASP, ASP.NET 1.1 or ASP.NET 2.0 let me know, I write a post on that.

Happy Coding