Using JavaScript to render XSLT transformed XML in all browsers is annoying and unecessarily time consuming. Magic XML simplifies cross-browser implementation of this functionality.
By decorating your elements with attributes, Magic XML can also automatically pull in the appropriate XML for you, transform it using a specified XSLT and then push it onto your page - all with just a single line of code.
Just download Magic XML, unzip the archive and then place either the minified version (m-xml.min.js) or the non-minified (m-xml.js) version into a suitable directory of your site.
Then be sure to add in a reference to Magic XML on the pages where you want to use it, like so...
<script type="text/javascript" src="m-xml.min.js"></script>
It's easy to get your transformed content onto the page with Magic XML. Just add some additional attributes, tell Magic XML to parse the page and you're set!
<div data-xml="demo.xml" data-xslt="transform.xslt"></div>
magicXML.parse()
Top
If you've got parameters in your XSLT that you want to pass
values to, Magic XML can help you out. Just add a JSON
formatted array as an additional attribute to your elements
- objects should have the parameters name, value
and optionally xmlns, if your parameters are in a
different namespace.
<div data-xml="demo.xml" data-xslt="transform.xslt"
data-xsl-params="[{ "name" : "filterById", "value": "2" }]"></div>
magicXML.parse()
Top
If you don't want Magic XML to parse all the elements on
your page, you can pass selectors to the parse
method.
<div class="example" data-xml="demo.xml" data-xslt="transform.xslt"></div>
magicXML.parse(".example")
Top
If for some reason you don't like the default data attributes that Magic XML uses you can configure the use of custom attributes.
<div data-apples="demo.xml" data-pears="transform.xslt"
data-pear-params="[{ "name" : "filterById", "value": "2" }]"></div>
magicXML.configure("data-apples", "data-pears", "data-pear-params");
magicXML.parse();
You don't have to override everything though, passing null
or undefined will fallback to the default attribute name.
<div data-xml="demo.xml" data-pears="transform.xslt"
data-xsl-params="[{ "name" : "filterById", "value": "2" }]"></div>
magicXML.configure(null, "data-pears");
magicXML.parse();
Top
| Attribute | Description |
data-xml
|
The path to the XML file to use as the data source. |
data-xslt
|
The path to the XSLT file to be used to transform the XML document. |
data-xsl-params
|
A JSON formatted array of parameters that will be passed to the XSLT (optional). |
[ { "name" : "yourParameterName", "value" : "yourParameterValue" } ]
| Property | Description |
name
|
The name of the parameter to set. |
data-xsl
|
The value of to set the named parameter to. |
xmlns
|
The XML namespace within which the parameter resides (optional, and very rarely needed). |
For elements matching the selector (or all elements if no selector specified), transforms an attribute specified XML document using an attribute specified XSLT and replaces the elements content with the result.
Make sure you call parse after
all the DOM elements you want to work with have been loaded!
| Parameter | Type | Description |
selector
|
string |
A CSS-esque selector which limits the elements parsed by Magic XML (optional). |
Basically, an on-demand version of parse which
performs an XSLT transformation on a specified XML
document (optionally with parameters) and then renders the
result to a DOM element.
| Parameter | Type | Description |
selector
|
string |
A CSS-esque selector which specifies a single DOM element to fill with transformed content. |
xmlSource
|
string |
The path to the XML file to use as the data source. |
xslSource
|
string |
The path to the XSLT file to be used to transform the XML document. |
parameters
|
array |
An array of parameter objects conforming to the same structure as the data-xsl-params objects (optional). |
Provides raw access to the cross-browser XSLT code that underpins Magic XML. Will transform a specified XML document, using a specified XSLT file - passing in any parameters that are specified.
transform will return a DOM element which you can then
append/replace/do as you wish with.
| Parameter | Type | Description |
xmlSource
|
string |
The path to the XML file to use as the data source. |
xslSource
|
string |
The path to the XSLT file to be used to transform the XML document. |
parameters
|
array |
An array of parameter objects conforming to the same structure as the data-xsl-params objects (optional). |
If you don't like the default attribute names that Magic XML uses, calling
configure allows you to specify your own. Passing null
or not specifying any of the parameters will cause Magic XML to use the default
name for that attribute.
Unless you are specifying your own attribute names you do not need to call
configure.
| Parameter | Type | Description |
xmlSourceAttribute
|
string |
Name of the attribute that will hold the path to the XML file (optional). |
xslSourceAttribute
|
string |
Name of the attribute that will hold the path to the XSLT file (optional). |
xslParamAttribute
|
string |
Name of the attribute that will hold JSON array of XSLT parameters (optional). |
Magic XML is released under the open-source MIT License. You can use Magic XML as you wish, so long as the copyright notice on the .js file remains in place.
TopMagic XML is used in the, inventively named, mock e-commerce website XML Shop. Viewing the source may help you better understand the implementation of Magic XML.
Top