AJAX Updating different Divs depending on which link is clicked

[swanjm01]

Hello,

I am new to the JS/AJAX world. Can't find an answer to my question anywhere. I am building a PHP app that generates a report. The script querys the DB and groups the data together. Each group includes a link with an onClick() that uses GET to run another script that creates a table of details about each group. I am passing all the PHP variables to the script, so the information is currently being correctly displayed on the page.

The id of the div that is to receive the data is dynamically generated on page load, so each group has a div with a unique id.

The problem is the data is getting delivered to the first div that is generated on page load, regardless of which link is clicked. It looks as though the external .js is receiving the first occurrence of the div id on page load, not on click.


Here is my external js:
[CODE]
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var levelContent = document.getElementById("levelContent").innerHTML;

document.getElementById("elementData"+levelContent).innerHTML= xmlHttp.responseText;

}
else {
//alert(xmlHttp.status);
}
}

// Will populate data based on input
function htmlData(url, qStr)
{




if (url.length==0)
{

document.getElementById("elementData"+levelContent).innerHTML="";

return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}

url=url+"?"+qStr;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}
[CODE]

and here is my PHP/HTML. This snippet is contained in a while loop.

[CODE]
echo "<tr><td><a href=\"#\" id=\"levelContent\" onclick=\"htmlData('elementData.php?level=$level&levelContent=$levelContent&begin=$begin&end=$end')\">".$levelContent."</a></td><td>".$V1."</td><td>".$V2."</td><td>".$V3."</td></tr>";

echo "<tr><td colspan=\"4\">";
echo "<div id=\"elementData".$levelContent."\">";
echo "</div>";
[CODE]

The only id that is static is the id in the A tag. So I think that may be part of the problem. It is easy enough to generate the id dynamically, but....

How do I set it up so that it sends this data to the JS so it calls the correct div id in stateChanged() on click?

I appreciate any insight into how to make this work and/or code it better, cleaner, more compatible, etc.

Thanks for your attention through my long-winded explanation of a likely simple issue.

[A1ien51]

pass in the id with the onclick?

onclick='foo("url","yourId")'

Eric

[swanjm01]

Thanks Eric,

I got it working. I used your input to send the div variable to the htmlData function and then changed the stateChanged function to accept the div variable. If you think there is a better way of doing it, I am all ears. Thanks again.

Here is the final code....so far :)

[code]

function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

function stateChanged(div)
{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{

document.getElementById(div).innerHTML= xmlHttp.responseText;

}
else {
//alert(xmlHttp.status);
}
}

// Will populate data based on input
function htmlData(url,div)
{




if (url.length==0)
{

document.getElementById(div).innerHTML="";

return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}

url=url+"?";
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function(){stateChanged(div)};
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}
[code]