AJAX - PHP update of multiple divs - php

Question

Good morning everyone, i have this code, took from w3schools
var xmlhttp
function showCustomer(str,str2)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="/Script/ajaxdb/aaaaa.php";
url=url+"?id="+str;
url=url+"&id2="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4) {
document.getElementById("TXTHINT").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
I would like to change the name of the ID into
document.getElementById("TXTHINT").innerHTML=xmlhttp.responseText;
I would like to have something like
document.getElementById("TXTHINT1").innerHTML=xmlhttp.responseText;
document.getElementById("TXTHINT2").innerHTML=xmlhttp.responseText;
document.getElementById("TXTHINT3").innerHTML=xmlhttp.responseText;
and so on..
i tried
document.getElementById("TXTHINT"+str).innerHTML=xmlhttp.responseText;
cause i need the value of the variable str, to have the id name as TXTHINT1, TXTHINT2, TXTHINT3 and so on....
but id doesn't work.
Can someone help me ?

Answer 1

I would prefer to set a class attribut for all elements you want to change.
For example:
<div id="TXTHINT" class="txthints"></div>
<div id="TXTHINT1" class="txthints"></div>
Now you could easily iterate through all elements with class atrribut "txthints" and set the content.
var divsToChange = document.getElementsByClassName('txthints');
var newContent = xmlhttp.responseText;
for(i=0; i < divsToChange.length; ++i ) {
divsToChange[i].innerHTML = newContent;
}

Answer 2

You Should specify a global var to access it in other functions.
var xmlhttp
var str_global;
function showCustomer(str,str2)
{
str_global=str;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="/Script/ajaxdb/aaaaa.php";
url=url+"?id="+str;
url=url+"&id2="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4) {
document.getElementById("TXTHINT"+str_global).innerHTML=xmlhttp.responseText;
}
}

Answer 3

Try this
xmlHttp.onreadystatechange=function () {
stageChanged(str, str2);
};
xmlHttp.open("GET", handlingURL, true);
xmlHttp.send(null); }
function stageChanged(str, str2) {
if(xmlHttp.readyState==4)
{
document.getElementById("TXTHINT"+str).innerHTML=xmlhttp.responseText;
//do something with the response
} }
STR is not defined as a global parameter so it will not be able to accessible in the response function, you need to pass str as a parameter.