Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    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
    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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Try commenting out request.abort() and see if it makes any difference.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Try commenting out request.abort() and see if it makes any difference.
    It has done nothing

    I've minimized my code down to this
    Code:
     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
    Code:
    	 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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You should remove the ()

    request.onreadystatechange = updatePage();

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

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    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?

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    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.
    Last edited by Keysle; 11-17-2010 at 09:18 PM.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Keysle View Post
    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.

    Code:
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •