Saturday, October 2, 2010

jQuery, XML and XSLT (jqXSLT)

Hey.

jQuery has been a boon to JavaScript programmers and designers ever since it's introduction. With the official support of Microsoft with it's inclusion in MVC frameworks and the default application in VS 2010, it's here to stay!!.

Anyway, while having an extremely "jQuery"-fied conversation with a buddy of mine, I decided to put together a simple jQuery extension that puts data into a DOM element given an XML and a XSL document. The documents could either be provided as URLs or as JS objects in code. The syntax is pretty simple:

//HTML snippet
< div id='content' >< /div>

//JS code
$(document).ready(function(){
$('#content').xslt('XslDocument.xsl','XmlDocument.xml');
});

Simple enough? The extension itself if less than 3kb (lesser than 2kb minified). This example has been tested in the following browsers:
  • Firefox 3.6.10
  • Chrome 6.0.472.63
  • IE 9 beta (9.0.7930.16406)
  • Opera 10.62
  • Safari for Win (5.0.2)
Here is the jqXSLT.js file I wrote as well as compressed versions of all required files. Run "test.html" from either of the compressed files to view the example. Note that the example does not work in Chrome when run as a local file. This is due to the security restriction (that's also labelled as a bug here) in Chrome that prevents reading local files using AJAX. There's a work-around suggested as well there, though I couldn't get it to work. Take a shot it it and let me know if it does work for you!!

jqXSLT.rar
jqXSLT.zip
jqXSLT.js
jqXSLT-min.js

Cheers.

2 comments:

Energy book said...

looks good..though xsl transformation from an xml document is common...having an extenstion to jQuery will come handy.

Avinash said...

Hi Energy book.

Thanks for your comment. Let me know if you would like to see any improvements in it or if you would like additional features.

Cheers.