AJAX readystate stuck at 1

[mort]

Hey all

 

I am making a self validating AJAX form, which was working fine until I tried to get clever and make it handle multiple fields. It was working fine when it only validated the 'username' field, but when I tried adding support for extra fields, passing variables via a function it ceases to work and gets stuck at readystate == 1, and thats still on the username field without even trying a second

 

var url = "reg_val.php?username="; // The server-side script

function handleHttpResponse(whichField) {
//alert(http.readyState);

//var whichField = "username";

if (http.readyState == 4) {
	if(http.status==200) {
		var results=http.responseText;
		var results_array = results.split("|");

		if (whichField == "username") {
			document.getElementById('res_user').innerHTML = results_array[0];
			document.getElementById('username').className = results_array[1];
		}
		else if (whichField == "email") {
			document.getElementById('res_email').innerHTML = results_array[0];
			document.getElementById('email').className = results_array[1];
		}
	}
}
}

function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	if (!xmlhttp){
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
}
return xmlhttp;	
}

/*  */
function requestUsername(field) {
document.getElementById('res_user').innerHTML = "<img src=\"images/icons/indicator.gif\">";
var sId = document.getElementById("username").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse(field);
http.send(null);
}

function requestEmail(field) {
document.getElementById('res_email').innerHTML = "<img src=\"images/icons/indicator.gif\">";
var sId = document.getElementById("email").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse(field);
http.send(null);
}

var http = getHTTPObject(); // We create the HTTP Object

 

In the individual fields function, if I change

handleHttpResponse(field)

to

handleHttpResponse

and declare the "whichField" variable so its static, then it works, otherwise it gets stuck

 

obviously I need some way to use the handleHttpResponse function to be able to update different fields

[haku]

Since I can't see all your code, I'm partially guessing at your problem, but I think it may be here:

function handleHttpResponse(whichField) {
//alert(http.readyState);

//var whichField = "username";

 

You are passing 'whichField' to the function, but then you are declaring whichField as 'username'. Your php script is probably stuck in a loop since its not getting a correct variable passed into it, which is why your ajax script isnt working.

 

Or so Im guessing.

[mort]

as you can see that is commented out, what I mean is if I uncomment it, change 'handleHttpResponse(field)' to 'handleHttpResponse' and declare whichField manually it works

 

HTML

<input type="text" name="username" id="username" class="register" onchange="requestUsername('username');">
<div id="res_user"> </div>

 

so i want to pass 'username' from the requestUsername() function (or whichever request function i decide to use, ie different fields), to the handleHttpResponse() function, which will in turn tell the AJAX which code to modify. In this case changing the contents of a div, and the class of the input

[haku]

Ahh, I see what your problem is! You are creating your HttpRequestObject outside of any function, which means that you only have one object to work with. Move that line of code inside each of your functions so that a new object is created for each function each time the function is executed. That should solve your problems.

[mort]

hmm nope that doesnt seem to be it, unless of course I have misunderstood you

 

I tried putting the

var http = getHTTPObject();

line in both of the request functions, plus threw it in the handleHttpResponse function as well just to see what it did, nothing, infact then the readystate wont go past 0

 

Apologies for anything stupid I am doing, JS isnt my language of choice as I am a PHP dev

[mort]

ok so instead of passing the values to handleHttpResponse via the parameters I ended up passing it from ther PHP script itself

 

has the same outcome, different solution

[mort]

sorry to bump an oldy, but for the benefit of dzelal who contacted me on msn..

 

For the value PHP sent back to AJAX, i just made a sting containing the values delimited by a "|"

 

$q = "SELECT * FROM users WHERE username = '$get_username'";
$user_query = mysql_query($q);

$num_users = mysql_num_rows($user_query);

if ($num_users == 0) {
	echo "res_user|username|Available|register_green|<img src=\"".IMAGES_LOC."icons/pass.gif\">";
}
else {
	echo "res_user|username|Unavailable|register_red|<img src=\"".IMAGES_LOC."icons/fail.gif\">";
}

 

Then in javascript, split the array into values with split()

 

function handleHttpResponse() {	
if (http.readyState == 4) {
	if(http.status==200) {
		// Get response from PHP script
		var results=http.responseText;
		// Split response into multiple values, ie: DIV id, class name
		var results_array = results.split("|");

		// then use results_array[0], results_array[1] etc to get the values for whatever you need them for
	}
}
}

 

hope that helps