XML/XSL transform using Javascript/JQuery

Question

Can anyone tell me if there is a way to do an XML/XSLT transformation on the client side using Javascript or JQuery, a way that works in all major browsers? (Chrome, Safari, Firefox and IE)? Thanks.

Solution 1

I should state from the start that I wrote this script, but if you're looking to just do some transformations and pass some parameters to your XSLT (nothing too fancy) then you can try Magic XML.

You can also have it automatically pull in your data and apply transformations by setting some data- attributes on your DOM elements. For example...

<div data-xml="example.xml" data-xslt="transform.xslt"></div>

...would automatically pull in data from example.xml and apply the transform.xslt to it.

It works in Opera, Chrome, Firefox and IE and is open source.

Solution 2

Have you considered Saxon CE? It used to require a commercial licence for deployment but the latest version has been released as open source.

Solution 3

There's a client side example.

Comments

[pgfearo]

Coincidentally, the open source Saxon-CE 1.1 release was announced on the same day as this answer: Saxon-CE 1.1

[Ian Roberts]

@pgfearo thanks for the heads up, I've edited the answer accordingly.

[Ishbir]

The MagicXML URL seems to be non-responsive, and I believe it is hosted by you juddging from the domain name. I'm interested in the library.

[Tom Davies]

Hey tzot, sorry about that! Updated the URL now, should be good to go.

[Alexis Wilke]

Which version of XSLT do we end up with? Is it 1.0 or 2.0?

[yan bellavance]

does not work when xsl stylesheet contains node-set in edgeHTML 14

[yan bellavance]

awesome! the doc is great too!

[John]

@yanbellavance Yes, browsers have moved on a bit since that article was written

[John]

@MarkKCowan Missed your comment when you first posted it, but it only uses MSXML when it detects IE

[yan bellavance]

magic xml is just a wrapper around "client side example" found in w3c. It wont fix any upcoming problems. I am wondering if I can reimplement the node-set function using wgx.