Overcoming the blog block

You realise that you haven’t been blogging enough when the last day that you posted anything falls off the stats graph! So here I am adding my iota to the smoke and mirrors that is Ajax.

There I was wanting to POST data using Ajax. So I read my text books and adapted what I found then Googled to fill in the gaps. It worked in Firefox – hurrah! Then I tried IE6, and waited … after the counting stopped it finally deigned to update – hurroo! So I started removing lines to see if it still worked and if the speed would improve. This is what was left after the dust cleared:

function updateStuff() {
	setUpdateStuffString();
	makeUpdateStuffRequest("stuffupdate-ajax.php");
}
var updateStuffString;
function setUpdateStuffString () {
	updateStuffString="";
	var tempString = "";
	var frm = document.StuffDetails;
	var numberElements = frm.elements.length;
	for(var i = 0; i < numberElements; i++) {
		switch (frm.elements[i].type) {
		case 'select-one':
			tempString=frm.elements[i].name+"="
			tempString+=encodeURIComponent(frm.elements[i].options[frm.elements[i].selectedIndex].text);
			break;
		case 'radio':
			if (frm.elements[i].checked) {
				tempString=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
			}
			break;
		submit:
			tempString="Submit="+encodeURIComponent(frm.elements[i].value);
			break;
		default:
			tempString=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
			break;
		}
		if(i < numberElements-1) {
			updateStuffString +=tempString+"&";
		}
		else {
			updateStuffString += tempString;
		}
	}
}
var http_request_updateStuff = false;
function makeUpdateStuffRequest(url) {
	http_request_updateStuff = false;
	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        	http_request_updateStuff = new XMLHttpRequest();
        	if (http_request_updateStuff.overrideMimeType) {
                	http_request_updateStuff.overrideMimeType('text/xml');
                	// See note below about this line
            	}
        }
	else if (window.ActiveXObject) { // IE
            	try {
                	http_request_updateStuff = new ActiveXObject("Msxml2.XMLHTTP");
            	}
		catch (e) {
                	try {
                    		http_request_updateStuff = new ActiveXObject("Microsoft.XMLHTTP");
                	}
			catch (e) {
			}
            	}
        }
        if (!http_request_updateStuff) {
            	alert('Giving up; cannot create an XMLHTTP instance');
            	return false;
        }
        http_request_updateStuff.onreadystatechange = alertUpdateStuff;
        http_request_updateStuff.open('POST', url, true);
	http_request_updateStuff.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	destinationDiv = document.getElementById("editstuff");
	destinationDiv.innerHTML="Updating details...";
        http_request_updateStuff.send(updateStuffString);
}
function alertUpdateStuff() {
        if (http_request_updateStuff.readyState == 4) {
            	if (http_request_updateStuff.status == 200) {
			destinationDiv = document.getElementById("editstuff");
			destinationDiv.innerHTML=http_request_updateStuff.responseText;
			...
            	}
		else {
                	alert('There was a problem with the request.');
            	}
        }
}

Of course you may find that there are other elements that I haven’t used that need special treatment that the default case can’t cope with but that’s your fun!