Dynamic Div Name getElementById

[FrankThePostman]

Hi,

I have list of items on a PHP page, and a <div> for each which i wish to populate with an AJAX request. Each <div> has a unique ID.

The code that i am using falls over due to the apparent static nature of this line:

document.getElementById("full-details").innerHTML=xmlHttp.responseText

If getElementById is set to "full-details" then the only <div> that is populated on the PHP page is the first one. If i click on a link lower down the list of items, the data changes correctly, but is populated only in the first <div>.

Is there a way of passing a variable to the line above?

showDetails is the function called by a link which contains the value for "str".

This is the full script:

var xmlHttp

function showDetails(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="../includes/full-details.inc.php" 
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("POST",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("full-details").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 tried:

getElementById(str)

getElementById(showDetails(str))

amongst a host of other hopeless stabs in the dark!!

Eternally grateful for any pointers, even if it's to say that i can't do it!

FTP.

[vinothkumarc]

I hope.. ur using static div's for response text... right!!!

Make some relations for those ids...

like..
div_content_details_1,
div_content_details_2
div_content_details_3.. and etc.,

if u might know that ur using three divs
then declare one global javascript variable

assign value like

/**/

var xmlHttp;
var id_to_disp;
function showDetails(str, control) // here itself u deside which div u want to use
{ 
   if(control.name="control1") {
       id_to_disp = 'div_content_details_1';
   }
  .......


document.getElementById(id_to_disp).innerHTML=xmlHttp.responseText
..

/**/

Sorry if anything wrong... bcoz i might not know wt ur thinking

Thanks,
VinothKumar.C
<snipped>

[HenryGR]

You may try to replace your line

document.getElementById("full-details").innerHTML=xmlHttp.responseText

with a line like:

eval("document.getElementById('"+full-details+"').innerHTML=xmlHttp.responseText");

[FrankThePostman]

I hope.. ur using static div's for response text... right!!!

Make some relations for those ids...

like..
div_content_details_1,
div_content_details_2
div_content_details_3.. and etc.,

if u might know that ur using three divs
then declare one global javascript variable

assign value like

/**/

var xmlHttp;
var id_to_disp;
function showDetails(str, control) // here itself u deside which div u want to use
{ 
   if(control.name="control1") {
       id_to_disp = 'div_content_details_1';
   }
  .......


document.getElementById(id_to_disp).innerHTML=xmlHttp.responseText
..

/**/

Sorry if anything wrong... bcoz i might not know wt ur thinking

Thanks,
VinothKumar.C
<snipped>

I'm not using using static div's for my response text.....i want each div to have a unique ID. Is this breaking some golden rule?!

Each time the list script is run by whatever user, the list might contain 1 item or 50 items, or more, so i can't use the "control" suggestion.

The nub of the problem is getting a variable to be passed to the statusChanged function....which i can't manage at the moment.

Thanks,

FTP.

[FrankThePostman]

You may try to replace your line

document.getElementById("full-details").innerHTML=xmlHttp.responseText

with a line like:

eval("document.getElementById('"+full-details+"').innerHTML=xmlHttp.responseText");

I don't think this will work, as i don't know what the div name is to be!

I've called the div name by a unique ID, so there could be, for example, a list of three div's called 1234, 2345 & 3456. What i'm trying to do is pass that number into the getElementById function so that the correct corresponding div can be populated, when the data is returned.

FTP.

[MidiMagic]

You can't use getElementById to access elements added by a script. It can see only the original ID list present at the time the page loads.

[~s.o.s~]

> You can't use getElementById to access elements added by a script.
Bosh. Please verify the facts before stating something.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function addElem(frm) {
      if(!frm)
        return;
      var d = document.createElement("DIV");
      d.id = "thirdDiv";
      d.innerHTML = "ThirdDiv";
      frm.appendChild(d);
    }
    
    function showDiv(frm) {
      if(!frm)
        return;
      var divs = document.getElementsByTagName("DIV");
      if(!divs)
        return;
      for(var i = 0, maxI = divs.length; i < maxI; ++i) {
        alert("DIV-" + (i + 1) + ": " + divs[i].id);
      }
    }
    
    function showNewDiv(frm) {
      if(!frm)
        return;
      var e = document.getElementById("thirdDiv");
      if(e) {
        alert("The ID of newly added DIV is: " + e.id);
      } else {
        alert("First click on the 'Add DIV' button");
      }
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="firstDiv">FirstDiv</div>
    <br>
    <div id="secondDiv">SecondDiv</div>
    <br>
    <input type="button" value="Add DIV" onclick="addElem(this.form);">
    <br><br>
    <input type="button" value="Show all DIV's" onclick="showDiv(this.form);">
    <br><br>
    <input type="button" value="Show new DIV" onclick="showNewDiv(this.form);">
    <br>
  </form>
</body>
</html>

> amongst a host of other hopeless stabs in the dark!!
> Eternally grateful for any pointers, even if it's to say that i can't do it!

You can try using Closures which are inner functions which can be executed even outside the context of it's enclosing function. Something like:

// Here 'id' is the ID of the element passed to the showDetails function
xmlHttp.onreadystatechange = function(myId) {
  return function() {
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      document.getElementById(myId).innerHTML=xmlHttp.responseText;
    } 
  }
}(id);