Here's some code I've written on top of mootools to translate xml using xslt with Mootools.
//Global Vars
var intUIDseed = 0; //For Unique IDs
var arrXMLs = []; //Array of XML docs
var arrXSLTs = []; //Array of XSLT docs
var arrCompleted = []; //Keep Track of the Statuses
//My New Implementation
function loadXMLDoc(strUrl, arrX, intIndex) {
try {
if (window.XMLHttpRequest) { //Mozilla, Safari, (Opera?)
arrX[intIndex] = new XMLHttpRequest();
arrX[intIndex].onreadystatechange = XMLReady;
arrX[intIndex].open("GET", strUrl, true);
arrX[intIndex].send(null);
}
else if (window.ActiveXObject) { //IE 6
arrX[intIndex] = new ActiveXObject("Microsoft.XMLHTTP");
arrX[intIndex].onload = XMLReady;
arrX[intIndex].open("GET", strUrl, true);
arrX[intIndex].send();
}
arrCompleted[intIndex] = false;
}
catch(e) {
logAjax("Error Loading XML Doc: " + e);
}
}
//Do the Injection, once all Requests are ReadyState = 4
function XMLReady(e) {
if (arrXMLs.length > 0) {
if (arrXSLTs.length > 0) {
var bolComplete = false;
bolComplete = arrXMLs.every(function(item, index) {return allReady(item, index)});
if (bolComplete == true) {
bolComplete = arrXSLTs.every(function(item, index) {return allReady(item, index)});
}
if (bolComplete == true) {
arrXMLs.each(function(item, index) {
if (!$chk($('divXML'+index))) {
logAjax('Could not inject divXML'+index+', it does not exist (size:'+arrXMLs.length+')');
}
else {
transformXML(parseXML(arrXMLs[index].responseText), parseXML(arrXSLTs[index].responseText), 'divXML' + index);
arrCompleted[index] = true;
logAjax('Injecting divXML'+index);
}
});
}
}
}
}
function allReady(item, index) {
if (item.readyState == 4) {
return true;
}
else {
return false;
}
}
//Given the URL of an XML and XSLT file, this function will create a function and 2 seconds later will populate your string.
function displayResult(strXML, strXSLT) {
logAjax('Initializing ' + strXML);
if (Browser.Engine.trident) {
if (Browser.Engine.version < struid = "divXML" intuidseed =" intUIDseed">
";
}
catch(err) {
logAjax(err);
return "There was a problem loading this information. This feature may not work in your browser. It has been tested in Mozilla Firefox 3.0 and Internet Explorer 7. If you are using Safari, it does not support XSLT at this time.";
}
return "This feature may be untested in your browser, or not currently working. It has been tested in Mozilla Firefox 3.0 and Internet Explorer 7. If you are using Safari, it does not support XSLT at this time."
}
//Function that should given XML string return [document object]
function parseXML(xml){
var doc;
if (window.ActiveXObject){
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = false;
doc.loadXML(xml);
} else {
doc = new DOMParser().parseFromString(xml, 'text/xml');
}
return doc;
};
//Use a Transform document to change a variable
function transformXML(xml, xslt, strElementID) {
try {
if ($chk($(strElementID))) {
// code for IE
if (window.ActiveXObject) {
//$(strElementID).set('text','xforming...(for ie)');
ex=xml.transformNode(xslt);
$(strElementID).set('text','');
$(strElementID).set('innerHTML',ex);
}
else if (document.implementation && document.implementation.createDocument) {
//$(strElementID).set('text','xforming...(for !ie)');
// code for Mozilla, Firefox, Opera, etc. DOES NOT WORK IN SAFARI
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
resultDocument = xsltProcessor.transformToFragment(xml,document);
$(strElementID).set('text','');
$(strElementID).appendChild(resultDocument);
//$(strElementID).innerHTML.replace(/&/gi, "&");
//$(strElementID).innerHTML.replace(/</gi, "<"); //$(strElementID).innerHTML.replace(/>/gi, ">");
}
}
}
catch(e) {
logAjax(e);
}
}
function logAjax(strMessage) {
if ($chk('divAjaxLog')) {
try {
strMessage = $('divAjaxLog').get('html') + '-'+strMessage+'
'
$('divAjaxLog').set('html', strMessage)
}
catch(e) {
}
}
}
And here's how you use that (and have a cool fade-in effect):
$('divNews').set('opacity',0);
var xmlDoc = "feeds/news.aspx";
var xsltDoc = "feeds/XSLT/homenews.xslt";
$('divNews').innerHTML = displayResult(xmlDoc, xsltDoc)
setTimeout("$('divNews').fade(1);", 1*1000);