Javascript - modify DIV

[citricsquid]

This is making me go insane, bat shit insane.

I have a div, it has a dynamic name, like: "56546_div", I then have a javascript function called "button", the function is executed with an onclick:

<a href="#" onclick="button(56546);">click</a>

and my javascript

var xmlHttp

function button(id)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="file.php";
url=url+"?id="+id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() { 
document.getElementById(id+"_div").innerHTML=xmlHttp.responseText;
}

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;
}

I've used this code eslewhere before and it works perfectly, but it won't work here. I have no idea what's wrong; I thought it might have been numbers in DIV but even if I create a div called "cat" and then hard code the javascript to change "cat" to "lol", it doesn't work.

The function definitely gets executed, I can see with firebug that it sends a query to the PHP with the id, but it doesn't change the div contents.

been trying for hours, any ideas?

[kiwi-kiwi]

At 7/4/09 08:19 AM, citricsquid wrote:

function stateChanged() {
document.getElementById(id+"_div").inner HTML=xmlHttp.responseText;
}

been trying for hours, any ideas?

Just out of curiosity, what does alert(id+"_div") return?

[citricsquid]

At 7/4/09 08:27 AM, kiwi-kiwi wrote: Just out of curiosity, what does alert(id+"_div") return?

okay wtf, nothing pops up which I assume my function is fucking up, but when clicking the button the PHP is queried and the database is updated like it's built to, so the query MUST be working.

god I hate my inability to do javascript. Any ideas from what you can see in my function that could be breaking? =\

[kiwi-kiwi]

Can you post the php too?
I'm not that good with javascript either, but the code looks ok, so I'm guessing the php hangs somewhere.

[citricsquid]

The php works fine, as I stated even when I change the output to bypass the PHP and just output "cat" it doesn't work, so the problem is within the javascript.

[Momo-the-Monkey]

At 7/4/09 08:19 AM, citricsquid wrote: This is making me go insane, bat shit insane.

I have a div, it has a dynamic name, like: "56546_div", I then have a javascript function called "button", the function is executed with an onclick:

click

and my javascript

var xmlHttp

function button(id)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="file.php";
url=url+"?id="+id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() {
document.getElementById(id+"_div").inner HTML=xmlHttp.responseText;
}

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;
}

I've used this code eslewhere before and it works perfectly, but it won't work here. I have no idea what's wrong; I thought it might have been numbers in DIV but even if I create a div called "cat" and then hard code the javascript to change "cat" to "lol", it doesn't work.

The function definitely gets executed, I can see with firebug that it sends a query to the PHP with the id, but it doesn't change the div contents.

been trying for hours, any ideas?

The only thing I can see right off the bat is that you are missing a few minor pieces of code, such as

catch(e) {
       try {
	       xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch(e) {
	       xmlHttp= null;
	}
}

to make sure there are no undefined variables, and to make sure ajax is really being set...
and this

xmlHttp.onreadystatechange = stateChange(xmlHttp);
function stateChange(xmlHttp){
   if(xmlHttp.readyState == 4)
   {
	if(xmlHttp.status == 200)
	{
               // Do function code here
       }
   }
}

to ensure the readiness is really ready.

And are you sure that your php is function correctly? And you are sure that the problem definitely lies within your javascript? The only other thing (at the moment) that I can think of is maybe creating a timeout for your ajax.

[Momo-the-Monkey]

Ug, sorry. I hit post WAY to early. Okay, revision of last post:

I see that you have preset xmlHttp to null, so that is not the problem
so I am focusing on this:

instead of

xmlHttp.onreadystatechange = stateChanged;

try it this way instead:

xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
// do code
}
}

that seemed to work great for me. Disregard my other shenanigans in my previous post. That was not meant to post.