Monday, June 29, 2009

AJAX, XSLT, and Mootools

Recently, I've done a lot of work with the Ajax, Mootools, and XSlT. I'm not sure whether I really like the way everything works, and if it's really the best way to do things; but it's definently the "cool" thing for developers at the moment. Actually JSON is probably "cooler."

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">
loading...
";
}
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);

Friday, April 24, 2009

Puerto Rico: the Album

I will be adding more as I go along, so check back tomorrow.

Wednesday, April 22, 2009

Puerto Rico: Day 1

Today was spent at the Beach, swimming and snorkeling. We also visited a secluded and stunning waterfall that Morgan's uncle Kelly knew. I'll post some pictures later. The Beach we visited was Crash Boat Beach. Take a look: http://www.panoramio.com/photo/1585423. We had BBQ chicken on a stick called Pinchos for Lunch. And dinner was home-made Morgan Wyatt Spaghetti.

Everyone here speaks Spanish, and some speak English. I was a bit surprised, it's pretty bi-lingual, but not as much as expected. We didn't have any problems.

We are staying at a little 3 bedroom house, probably around 1000 square feet at most. The bedrooms are air conditioned, but the rest isn't. Free WIFI though. It's roughly 80 degrees here, I think. I'm pretty happy with that :)