Ajax Javascript working in Google Chrome but not FireFox and Internet Explorer

[Keysle]

It works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later.

Are there any pros that can tell me why this is happening?

I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't.

var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
} 
}
}

function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;

function updatePage() {
if (username.value.length>0){
if (	 request.responseText.indexOf("0") == -1	 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

}
if (username.value.length===0)
{	userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername="";	}
}

I back tracked what i did and it appears that this code

var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail.

This is javascript that is suppose to check if a name has been taken by another user.

I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating

[glenngv]

Try commenting out request.abort() and see if it makes any difference.

[Keysle]

Originally Posted by glenngv

Try commenting out request.abort() and see if it makes any difference.

It has done nothing

I've minimized my code down to this

 var request;
 request=false;
   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = false;
       }  
     }
   }

 function isAlNum(str){
	return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;

   function updatePage() {
   alert("TEST ASSHOLE");
   }
function nameTest()
{
	 var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
     request.open("GET", url, true);
     request.onreadystatechange = updatePage();
     request.send(null);
}

When I replace this portion

	 var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
     request.open("GET", url, true);
     request.onreadystatechange = updatePage();
     request.send(null);

with a simple alert all browsers work, so I think it is something within this code.
I've tried setting asynchronous to false as well. It is something in that bit of code I know it is. Or at least something related to it

[glenngv]

You should remove the ()

request.onreadystatechange = updatePage();

Event handlers are assigned a function pointer and not the return value of the function.

[Keysle]

Originally Posted by glenngv

You should remove the ()

request.onreadystatechange = updatePage();

Event handlers are assigned a function pointer and not the return value of the function.

That's not it either.
I did just try it to be sure.
with or without they both work in google chrome but not FF and IE

How does Twitter, youtube and other popular services check if a username has been taken? not much different than my own technique right?

[glenngv]

That may not fix your issue but the proper way to assign event handlers should not have ()

Now to get to the bottom of the issue...Can you elaborate on what is exactly happening on Firefox? Look at Firebug and check if the ajax call is being processed. Look also in the console for any possible js error. In Firebug, you can have a breakpoint and do a step by step execution to see at which line does the code not work. You have a great tool like Firebug at your disposal that can help you in debugging this issue. Take advantage of it.

[Keysle]

Originally Posted by glenngv

Can you elaborate on what is exactly happening on Firefox?

Nothing is happening in firefox (or IE) at all.
In google chrome I can get the request to send through (for some reason it does it 4 time the first 3 returning nothing and the 4rth returning the correct value.)

I'll have to figure out how to use this Firebug thing. I've never heard of it.


----EDIT-----
Perhaps I should work on the rest of the site and have a page to page checking system. I know how irritating that would be for many users, but I have none. This is simply ridiculous. I've looked at other examples and they've done essentially the same thing with different goals. If the error is not clear, then it's most likely going to absorb too much of my time.

I'll come back to this issue later.

[glenngv]

Originally Posted by Keysle

Nothing is happening in firefox (or IE) at all.
In google chrome I can get the request to send through (for some reason it does it 4 time the first 3 returning nothing and the 4rth returning the correct value.)

I'll have to figure out how to use this Firebug thing. I've never heard of it.

The onreadystatechange handler is called multiple times. You have to check for readyState==4 which signifies the request is completed and the response is available. You also need to check for the http status code of 200 which means the request is successful.

function updatePage() {
   if (request.readyState==4){
       if (request.status ==200){
          alert('successful! response=' + request.responseText);
       }
       else {
          alert('Error ' + request.status)
       }
   }
}

Go install Firebug. It will make your life easier.