Problem trying to seperate code into multiple functions

[cerebros]

Hi everyone,

 

I've got a piece of code that works fine.  However, as I'm wanting to have a number of functions working with Ajax requests I'm trying to split out the code so that the bits dealing with creating the request and updating the page can be re-used.

 

This is the working code:

 

function system_lookup_locations(lookuptype, id_to_lookup) {

var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			return false;
		}
	}
}

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById(lookuptype);
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}	
    var country_state_city_id = document.getElementById(id_to_lookup).value;	
    var url = "system_lookup_locations.php?lookup_type_id=" + lookuptype;
url = url + "&lookup_id=" + country_state_city_id;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);			
}

 

 

This is the replacement code as it stands at the moment.  I've removed a load of alerts I've been using to track the progress of the code but left those in that are in the updatePage function. updatePage isn't complete yet - I've just got an alert in there that should trigger when the readyState is 4.

 

var ajaxRequest = createRequest();

function createRequest() {
try{
	// Opera 8.0+, Firefox, Safari
//        alert("checking non-IE");
	request = new XMLHttpRequest();
        
} catch (e){
	// Internet Explorer Browsers
	try{
//		alert("checking IE1");
		request = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
	//		alert("checking IE2");
			request = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
		//	alert("Your browser broke!");
			request == null;
		}
	}
}

if (request == null) {
 alert("error creating request object");	
} else {
 return request;
}
}

function sendRequest(url, element_to_update){
    alert("sendRequest function called");
ajaxRequest.open("GET", url, true);
ajaxRequest.onreadystatechange = updatePage(element_to_update);
ajaxRequest.send(null);
}

function updatePage(element_to_update) {
    alert("updatePage function called");
if (ajaxRequest.readyState == 4) {	
	alert("ajaxRequest.readyState = 4");
}
  else {
 if (ajaxRequest.readyState == 1) {
	alert("ajaxRequest.readyState = 1"); 
 }
 else {
	 if (ajaxRequest.readyState == 2) {
			alert("ajaxRequest.readyState = 2"); 
		 }
	 else {
		 if (ajaxRequest.readyState == 3) {
				alert("ajaxRequest.readyState = 3"); 
			 } 
	 }
 }	 
}

}

function system_lookup_locations(lookuptype, id_to_lookup) {
    alert("lookup function called");
    var country_state_city_id = document.getElementById(id_to_lookup).value;
    var url = "system_lookup_locations.php?lookup_type_id=" + lookuptype;
url = url + "&lookup_id=" + country_state_city_id;

sendRequest(url, lookuptype);
}

 

As it stands the code gets to readyState 1 but no further.

 

I'm probably missing something completely obvious as I've not done much Javascript and Ajax but can anyone point out where I'm going wrong?

 

thanks