Ajax + Client side XSLT
Recently I had the pleasure of working with a web interface that simultaneously displayed a single XML data set in two ways, an navigable outline format, and a pure content format. The data itself was describing contract terms, clauses, and rates. Legalese. The interface up to that point was built using a good old fashioned table layout with a healthy side order of custom attributes and inline event handlers on non-standard elements. Ick! Ugly, yes, but there was technically nothing to raise any cross browser compatibility issues. It was designed for IE and didn't display all that well in FireFox, but it did display close to correctly, and all the functionality was there.
That is, until they added this interface. The UI framework loaded separately, then issued three Microsoft.XMLHTTP requests: one for the XML data, and two for the XSL stylesheets to be used to transform the XML.
All the code was IE specific, so I couldn't very well leave it alone, now could I? Besides, I like to develop in FF,*due to its plethora of wonderful extensions. Well that and it's a much faster, safer, and more standards compliant browser. Old news, I know. but was prevented from doing so by this unwarranted tryst with the unruly IE.
So I came up with a nice little library to manage the collection and transformation of XML data, and do it in a cross browser and OO way.
Use it like this:
function page_init() {
// Create a new object. Note this needs to be globally
// scoped so the IO Bridge can reunite the response with
// the calling object
xml = new XMLData();
// Define the source of your data. This can be any URI
// that returns valid xml data
xml.setDataSource("my_data.xml");
// Also define a couple of stylesheets to transform the
// data once it's here
xml.addStylesheet("outline_view.xsl","outline");
xml.addStylesheet("content_view.xsl","content");
// Tell the object to call build_view() when all the
// data and XSL files are ready to rumble
xml.setCallback(build_view);
// Start things in motion
xml.load();
}
function build_view() {
var tree = document.getElementById('data_tree');
var content = document.getElementById('data_content');
// flush the contents
tree.innerHTML = content.innerHTML = "";
// Append the generated DOM structure to the target
// nodes
tree.appendChild(xml.transform("outline"));
content.appendChild(xml.transform("content"));
}
// Using Keith Gaughan's EventManager library to separate
// out the <body onload="page_init();">.
EventManager.Add(window,"load",page_init,false);
After the page loads, this will send the ajax requests for each file
my_data.xml, thenoutline_view.xsl, thencontent_view
Naturally it doesn't wait for one response before sending any other requests.
The two stylesheets are given labels for use in the call to transform(). Label assignment isn't strictly necessary. If you don't provide one to addStylesheet() or transform(), they will assume a label "default", so just don't call addStylesheet(url) with different urls and you should be fine.
Happy transforming!
