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.

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>

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 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.

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.

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.

> 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);
This article has been dead for over six months. Start a new discussion instead.