CodingForums.com - Resolved listener not working

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - Resolved listener not working (http://www.codingforums.com/showthread.php?t=273356)

listener not working

Im not sure whats up with the listener but the function is not working and i cant seem to find out whats wrong.

my other function works fine but when i paste this into the functions area (i dont even call it yet) then the other functions stop,
so it seems that maybe there is something broke here.

Code:





var xmlHttp

function tog_email(nemail,neid)

{

  xmlHttp=GetXmlHttpObject();

  if (xmlHttp==null)

  {

   alert ("Your browser does not support AJAX!");

   return;

  }

var url="email_availability.php";

url=url+"?nemail="+nemail"&neid="+neid;



xmlHttp.onreadystatechange=Changed;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}//close function toggle email



function Changed()

{

  if (xmlHttp.readyState==4)

  {

   settextflag();   

  }



}//close function changed







function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}//end function GetXmlHttpObject

and then the settextflag function is here (this is just for testing to make sure im finishing the process)

Code:



function settextflag(){

        



document.getElementById('emailswitch').value="p";





}

and then here are my inputs

Code:



<input type="text" id="hiddenemail" name="hiddenemail" value="<?php print("$email"); ?>" onchange="tog_email(this.value,$advuser);" />



<input type="text" id="emailswitch" name="emailswitch" />

a couple of points, the test for email_availablilty works fine, i tested it with direct url and with url vars and that file works fine.

im not an ajax person so i dont understand why im not getting the silent process being executed. When i remove the tog_email function and the rest of the on change httprequest stuff and call the settextflag() direct, then it works, when i change the field value for hiddenemail then the other input changes to a "p" but then when i add the tog_email and other httprequest stuff back (and not even call it) nothing works.

url+"?nemail="+nemail"&neid="+neid;
should be
url+"?nemail="+nemail+"&neid="+neid;

Thanks so much, i was just looking at that this morning and nice catch, its always good to have other eyes look sometime. Thanks

i thought this was resolved but its not. its not grabbing the echo display and giving me a 200 or a readystate 4 and everything else works, the php display correctly,

i can do a test with just this in the function and it works fine

Code:

document.getElementById('emailswitch').value="p";

I did fix the issue before with the + and i did consolidate the function a bit

here is the new function, i decided not to pass the vars from the onchange but just to load them in the function.

Code:



function checkemail()

{

   //set var and check for browser support



  var xmlhttp;

  xmlhttp=GetXmlHttpObject();



  if (xmlhttp==null)

   {

   alert ("Your browser does not support AJAX!");

   return;

    }



//set all needed vars to run function



var nemail = document.getElementById('hiddenemail');

var neid = document.getElementById('hiddenuserid');

var url="email_availability.php";

url=url+"?nemail="+nemail+"&neid="+neid;



//now check which command to use per browser



if (window.XMLHttpRequest)

  {

   // code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();



  }else{

     // code for IE6, IE5

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

     }



xmlhttp.onreadystatechange=function()

  {

   if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {   



    //this is just a test to see if this executes



    document.getElementById('emailswitch').value="p";

    

    }else{



          // only test to see if executes defaut



          document.getElementById('emailswitch').value="no";





         // this will be the actual code when test passes 

         // grab the text that is echoed on the php process completion

         // display that text in the div called emailstatus



          //document.getElementById('emailstatus').innerHTML=xmlhttp.responseText;



          }//end else



 }//end onreadystatechange

 

// execute it quietly



xmlhttp.open("GET",url,true);

xmlhttp.send(null);



// just a test default trying to get something in return to problem solve

// this will be removed. 

document.getElementById('emailswitch').value="no";





}//close function checkemail

Again and ran the php file with doing the url manually in the browser and it works fine, passes all the echo tests.
The only thing i can think of is maybe the url is messed up but i dont know how to echo the url var so i can see it when i execute the function.

You should encode the email and id before attaching them to the url:

Code:

var nemail = document.getElementById('hiddenemail');

nemail = encodeURIComponent(nemail);

var neid = document.getElementById('hiddenuserid');

neid = encodeURIComponent(neid);

var url="email_availability.php";

url=url+"?nemail="+nemail+"&neid="+neid;

I assume that you have a function named GetXmlHttpObject() although it doesn't seem that it is necessary - it's likely to be repeating some of the code that you already use.

yeah that function was left over from the old code that split up the request into different functions. removed it and I am getting feedback now.

do i even need to set it to null and then check it, im guessing if i do then i need to do it after it checks the dif browser commands right.

Code:



if (xmlhttp==null)

   {

   alert ("Your browser does not support AJAX!");

   return;

    }

You could try this:

Code:

function getAjax() {

    var ajax = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari, ...

        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // IE <= 8

        try {

            ajax = new ActiveXObject("Msxml2.XMLHTTP");

        } 

        catch (e) {

            try {

                ajax = new ActiveXObject("Microsoft.XMLHTTP");

            } 

            catch (e) {}

        }

    }

    return ajax;

}



function checkemail()

{

   //set var and check for browser support



  var xmlhttp;

  xmlhttp = getAjax();



  if (xmlhttp == false)

   {

   alert ("Your browser does not support AJAX!");

   return;

    }



//set all needed vars to run function



var nemail = document.getElementById('hiddenemail');

nemail = encodeURIComponent(nemail);

var neid = document.getElementById('hiddenuserid');

neid = encodeURIComponent(neid);

var url="email_availability.php";

url=url+"?nemail="+nemail+"&neid="+neid;



xmlhttp.onreadystatechange=function()

  {

   if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {   



    //this is just a test to see if this executes



    document.getElementById('emailswitch').value="p";

    

    }else{



          // only test to see if executes defaut



          document.getElementById('emailswitch').value="no";





         // this will be the actual code when test passes 

         // grab the text that is echoed on the php process completion

         // display that text in the div called emailstatus



          //document.getElementById('emailstatus').innerHTML=xmlhttp.responseText;



          }//end else



 }//end onreadystatechange

 

// execute it quietly



xmlhttp.open("GET",url,true);

xmlhttp.send(null);



// just a test default trying to get something in return to problem solve

// this will be removed. 

document.getElementById('emailswitch').value="no";





}//close function checkemail

I assume that 'emailswitch' is an input element - so has a 'value' property.

Added: great page here!

Previously I would receive a status of 0 (rather than 200) when testing locally. This no longer seems to be the case but it might be worth changing it from 200 to 0 temporarily just to exclude this possibility.

yeah its an input but had value="" but i took off the value property because i figured it would be set by the function only since thats the only way i want to set that

I used it for testing to make sure when i was getting execution or not. Since i have the div working now i dont know if i still need that, so i might remove that or comment it out for testing later if i need it.

Thats great thanks, i had seen the old code before in another file but didnt know what it was or how it worked, this has been a learning experience and thats a good thing, now i know another way to do things and i like learning, i just wish i would not stay up all night doing so lol...

thanks sooooooooooooo much for helping me learn...

yeah the old code did not even have 200 in there it just checked for readystatus 4 is that ok?

Code:

 

function getAjax() {

    var ajax = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari, ...

        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // IE 6

        try {

IE7 has the window.XMLHttpRequest

Quote:

yeah the old code did not even have 200 in there it just checked for readystatus 4 is that ok?

You should check both: 4 indicates the request completed, 200 indicates successful completion. You should read that article I linked :thumbsup:

Ta @DaveyErwin

Just wanted to follow up to say (for those that want value and not element) that you need to tweek that alittle and add .value attribute to get the value because it defaults to the element. All i did was did an alert until i got the value i wanted, thats the easiest way i think. I am not that far along after that i think i will have to prob use a diff output also to the div but not sure im not there yet.

Hi another follow up, i did finally get it working after several hours of tweeking.
Now that i know how to test and work the process a bit, next time will go faster.
Today was a learning curve.

Anyway i wanted to let you know that not to use the else on the status values. This is what im talking about.

Code:



if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {  

        // grab the text that is echoed on the php process completion

         // display that text in the div called emailstatus





     document.getElementById('emailstatus').innerHTML=xmlhttp.responseText;

   

    }else{



             // this is the area im talking about 



            // alert('There was a problem with the request.');

         



          }//end else

You can leave the else there if you want just comment out the contents of it.
The reason i found is that it will keep popping up that message several times until it finishes and gets the right status code.
So if you just comment it out, you will just see the final result on the page and not have to sit there and keep clicking to close the multiple alerts.