• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 917
  • Last Modified:

AJAX problem: Keep getting >> 'xmlHTTp.readState' is null or not an object' -- please help

I have the following code, when someone checks the checkbox, it will provide info for the item
---------------------------

<html>
<head>
<script>
var xmlHttp

function showCustomer(str, c)
{

var url="ajax.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged(c))
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}

function stateChanged(c)
{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")    // KEEP GET AN ERROR HERE
{
eval(document.getElementById("tb_"+c).innerHTML)=xmlHttp.responseText
}

}

function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
</script>

</head><body><form>

<table class='applicationTitle' border=0 cellpadding=1 cellspacing=0 width='100%'>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_2')" NAME='test0' VALUE='test0'><b>test0</b></td></tr>
<tr><td><div id="tb_1"></div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_3')" NAME='test1' VALUE='test1'><b>test1</b></td></tr>
<tr><td><div id="tb_2"></div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_4')" NAME='test2' VALUE='test2'><b>test2</b></td></tr>
<tr><td><div id="tb_3"></div></td></tr>

</table>

</form>
</body>
</html>
------------------------

Everytime I check on ANY of the checkboxes I get  "'xmlHTTp.readState' is null or not an object"

0
mousemat24
Asked:
mousemat24
  • 9
  • 9
  • 5
  • +1
1 Solution
 
ZvonkoSystems architectCommented:
Look at this line:

     xmlHttp=GetXmlHttpObject(stateChanged(c))

In that line is first the reference c as obtained bz function parameter c evaluated and passed to the function stateChanged() and then is the return value of stateChanged() passed to GetXmlHttpObject() , not the function stateChanged() itself.

If you like to pass a function as parameter to GetXmlHttpObject() call, then you have to do it like this:
    xmlHttp=GetXmlHttpObject(stateChanged)

But then there is no way to pass the actual parameter c to the handler function, and it make also no sense to pass c to that function the c value because c is only defined in the context of showCustomer() run time. And the event handler will be called and executed outside of that context. You see the problem? And there is also no easy solution to that common problem that you faced there.


0
 
ZvonkoSystems architectCommented:
OK, what you could do is this:

    xmlHttp=GetXmlHttpObject(new Function("stateChanged('"+c+"')"));



0
 
vxgCommented:

here is another suggestion...(using get/setAttribute)  Good luck!!!!!   I added a "//vxg" comment where I  mod'd your code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>


<script>

<html>
<head>
<script>
var xmlHttp
var objXmlHttp=null  //vxg

function showCustomer(str, c)
{
      var url="ajax.asp?sid=" + Math.random() + "&q=" + str
      xmlHttp=GetXmlHttpObject(stateChanged,c) //vxg  
      xmlHttp.open("GET", url , true)
      xmlHttp.send(null)
}

function stateChanged()
{  
  var c = objXmlHttp.getAttribute("handlerParam");  //vxg
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")    // KEEP GET AN ERROR HERE
      {
            eval(document.getElementById("tb_"+c).innerHTML)=xmlHttp.responseText
      }
}

function GetXmlHttpObject(handler)
{
      
      
      if (navigator.userAgent.indexOf("Opera")>=0)
      {
            alert("This example doesn't work in Opera")
            return
      }
      
      if (navigator.userAgent.indexOf("MSIE")>=0)
      {
            var strName="Msxml2.XMLHTTP"
            if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
            {
                  strName="Microsoft.XMLHTTP"
            }
            try
            {
                  objXmlHttp=new ActiveXObject(strName)
                  objXmlHttp.setAttribute("handlerParam", c);    //vxg
                  objXmlHttp.onreadystatechange=handler
                  return objXmlHttp
            }
            catch(e)
            {
                  alert("Error. Scripting for ActiveX might be disabled")
                  return
            }
      }
      
      if (navigator.userAgent.indexOf("Mozilla")>=0)
      {
            objXmlHttp=new XMLHttpRequest()
            objXmlHttp.onload=handler
            objXmlHttp.onerror=handler
            return objXmlHttp
      }
      
}
</script>

</head><body><form>

<table class='applicationTitle' border=0 cellpadding=1 cellspacing=0 width='100%'>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_2')" NAME='test0' VALUE='test0'><b>test0</b></td></tr>
<tr><td><div id="tb_1"></div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_3')" NAME='test1' VALUE='test1'><b>test1</b></td></tr>
<tr><td><div id="tb_2"></div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_4')" NAME='test2' VALUE='test2'><b>test2</b></td></tr>
<tr><td><div id="tb_3"></div></td></tr>

</table>

</form>
</body>
</html>
</script>



<body>


</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Pravin AsarCommented:
Try this one..

function showCustomer(str, c)
{
      var url="ajax.asp?sid=" + Math.random() + "&q=" + str
      xmlHttp=GetXmlHttpObject(function () { stateChanged(c); })
      xmlHttp.open("GET", url , true)
      xmlHttp.send(null)
}

function stateChanged(c)
{
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")    // KEEP GET AN ERROR HERE
      {
      var obj = document.getElementById("tb_"+c);
      if (obj) { obj.innerHTML) =xmlHttp.responseText;
      }
}
0
 
mousemat24Author Commented:
WOW guys, thanks for answering so quickly, I now keep getting errors here

eval(document.getElementById("tb_"+c).innerHTML)=xmlHttp.responseText

Have I used the eval function correct?
0
 
Pravin AsarCommented:
Look at the my post,

var obj = document.getElementById("tb_"+c);

Do not use eval.

0
 
mousemat24Author Commented:
I had to change you're code, because I couldnt get it to work, this is what I done:

function stateChanged(c)
{
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
      {
            var obj = document.getElementById("tb_"+c)+""; // had to place +""
            if (obj)
            {
                  obj.innerHTML =xmlHttp.responseText;
                  alert(obj.innerHTML)
            }
      }
}


However I still it wont work ... the alert works ok, but it dosent replace the <div> tag with the innerHTML? Any idea why this isnt working?

Thanks
0
 
mousemat24Author Commented:
sorry I mean alert(xmlHttp.responseText) not alert(obj.innerHTML)
0
 
vxgCommented:



It seems there is no xmlHttp object untill the GetXmlHttpObject() is complete. but you call stateChanged(c) first; so when you reference xmlHttp in stateChanged, it is null.
0
 
vxgCommented:

prav's would fix the prob i reffered to...  
0
 
mousemat24Author Commented:
I'm using pravinasar code, as seen below:

---------
function showCustomer(str, c)
{
      var url="ajax.asp?sid=" + Math.random() + "&q=" + str
      xmlHttp=GetXmlHttpObject(function () { stateChanged(c); })      
      xmlHttp.open("GET", url , true)
      xmlHttp.send(null)
}


function stateChanged(c)
{
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
      {
            var obj = document.getElementById("tb_"+c)+"";         
            if (obj)
            {
                  obj.innerHTML =xmlHttp.responseText;
                  alert(xmlHttp.responseText)
            }
      }
}
--------------------

Still not updating the <div> tags
0
 
ZvonkoSystems architectCommented:
If you had gone my way you would be already there...
0
 
vxgCommented:


My guess is there is just no way you can pass params to your stateChanged() with the following line in the GetXmlHttpObject() function:

objXmlHttp.onreadystatechange=handler  // will never pass params

Unless you use some global vars or get/setAttributes methods.  

Does that sound right to you other guys?
0
 
ZvonkoSystems architectCommented:
Pass the actual c parameter of the showCustomer() call to the event handler like this:


        xmlHttp=GetXmlHttpObject(new Function("stateChanged('"+c+"')"));



0
 
mousemat24Author Commented:
tried that too Zvonko, that too didnt work
0
 
vxgCommented:

Zvonko:  the stateChanged function nees to be called when the objXmlHttp.onreadystatechange event is fired (correct me if I am wrong please author). How will the parameter get inside the function at that time?
0
 
ZvonkoSystems architectCommented:
vxg, you offered to me to learnf from you yesterday after one day membership on EE. Now you keep asking me question. Forget it. I am for communication on this board but first I expect an excuse from you. Otherwise read my comments to the question owner and keep learning.

mousemat24: give me a second. I will post a complete example here...
0
 
Pravin AsarCommented:
Here is tested code,

<html>
<head>
<script language="javascript">
var xmlHttp
function showCustomer(str, c)
{

      var url="ajax.asp?sid=" + Math.random() + "&q=" + str
      xmlHttp=GetXmlHttpObject(function () { stateChanged(c); })
      xmlHttp.open("GET", url , true)
      xmlHttp.send(null)
}

function stateChanged(c)
{
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")    // KEEP GET AN ERROR HERE
      {
      var obj = document.getElementById(c);
      if (obj) obj.innerHTML =xmlHttp.responseText;
    }
   
}

function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
</script>

</head><body><form>

<table class='applicationTitle' border=0 cellpadding=1 cellspacing=0 width='100%'>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_2')" NAME='test0' VALUE='test0'><b>test0</b></td></tr>
<tr><td><div id="tb_1">tb_1</div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_3')" NAME='test1' VALUE='test1'><b>test1</b></td></tr>
<tr><td><div id="tb_2">tb_2</div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this.value, 'tb_4')" NAME='test2' VALUE='test2'><b>test2</b></td></tr>
<tr><td><div id="tb_3">tb_3</div></td></tr>

</table>

</form>
</body>
</html>

// For Test Purpose I used following ajax.asp

File : ajax.asp

<%
Response.Write ('From ajax.asp')
Response.Write ('<br>q = ' & Request.QueryString('q'))
%>
0
 
mousemat24Author Commented:
That worked pravinasar!!!! thanks for that, wow man that script is so useful!!
0
 
mousemat24Author Commented:
pravinasar, might be pusing it a bit, but can this be done to it as well?

If I check the item, I get lots of information ... which is cool

If I uncheck the same Item, it clears the information

Hope that makes sense?

Thanks for this
0
 
ZvonkoSystems architectCommented:
So you do not need my tested code. OK, no problem.
0
 
mousemat24Author Commented:
Hi Zvonko

Thanks for all the hard work you've put in helping me out, but pravinasar posted the code, and I really needed this ASAP. Hope you aint feeling bad or anything? Cos you guys helped me out BIG TIME!!!
0
 
ZvonkoSystems architectCommented:
Not a problem at all. I hope pravinasar finishes this here or in a new question for the uncheck part.
So far I have learned here too that "new Function()" is not the only way to solve that event handler dilema. function(){} works as well as pravinasar prooved.

I would suggest closing this question with pravinasar's example and open a new one for the uncheck part.
It is realy stright forward and cleaner when you keep it separate.

0
 
Pravin AsarCommented:
To erase the contents of div on uncheck, we need to status of fld, Hence showCustomer() parameters
are changed. have a close look.

Unchecked, To clean , it just simple javascript call,
Checked,  do Ajax

Also I have updated the code for ajax.asp to show only few line.


<html>
<head>
<title>Ajax
<script language="javascript">
var xmlHttp
function showCustomer(fld, c)
{
    var str = fld.value;
    if (!fld.checked) {    
            var obj = document.getElementById(c);
            if (obj) obj.innerHTML = '';
    }
    else {
            var url="ajax.asp?sid=" + Math.random() + "&q=" + str
            xmlHttp=GetXmlHttpObject(function () { stateChanged(c); })
            xmlHttp.open("GET", url , true)
            xmlHttp.send(null)
    }
}

function stateChanged(c)
{
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")    // KEEP GET AN ERROR HERE
      {
      var obj = document.getElementById(c);
      if (obj) obj.innerHTML =xmlHttp.responseText;
      alert (xmlHttp.responseText);    
    }
   
}

function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
</script>

</head><body><form>

<table class='applicationTitle' border=0 cellpadding=1 cellspacing=0 width='100%'>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this, 'tb_1')" NAME='test0' VALUE='test0'><b>test0</b></td></tr>
<tr><td><div id="tb_1">contents for tb_1</div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this, 'tb_2')" NAME='test1' VALUE='test1'><b>test1</b></td></tr>
<tr><td><div id="tb_2">contents for  tb_2</div></td></tr>
<tr><td><INPUT TYPE="CHECKBOX"  onclick="showCustomer(this, 'tb_3')" NAME='test2' VALUE='test2'><b>test2</b></td></tr>
<tr><td><div id="tb_3">contents for tb_3</div></td></tr>

</table>

</form>
</body>
</html>


File : ajax.asp

<%
Response.Write("From ajax.asp")
Response.Write("<br>q = " & Request.QueryString("q"))
%>
0
 
mousemat24Author Commented:
Thank you pravinasar, Zvonko and vxg, Its people like you that keeps the EE community the best on the NET

Take care, and thanks for replying so quickly, and helping me out

I really appreciate  you're kindness and you're willingness to help people like me.

Take care
0
 
ZvonkoSystems architectCommented:
See you.
0
 
Pravin AsarCommented:
Thanks,

0
 
ZvonkoSystems architectCommented:
mousemat24, do not miss to close this question by accepting pravinasar's comment as an answer.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 9
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now