943,545 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Dynamic Div Name getElementById
Ad:
Permalink
Apr 25th, 2008
0

Dynamic Div Name getElementById

Expand Post »
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var xmlHttp
  2.  
  3. function showDetails(str)
  4. { 
  5. xmlHttp=GetXmlHttpObject()
  6. if (xmlHttp==null)
  7.  {
  8.  alert ("Browser does not support HTTP Request")
  9.  return
  10.  }
  11. var url="../includes/full-details.inc.php" 
  12. url=url+"?q="+str
  13. url=url+"&sid="+Math.random()
  14. xmlHttp.onreadystatechange=stateChanged
  15. xmlHttp.open("POST",url,true)
  16. xmlHttp.send(null)
  17. }
  18. function stateChanged() 
  19. { 
  20. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  21.  { 
  22.  document.getElementById("full-details").innerHTML=xmlHttp.responseText 
  23.  } 
  24. }
  25.  
  26. function GetXmlHttpObject()
  27. {
  28. var xmlHttp=null;
  29. try
  30.  {
  31.  // Firefox, Opera 8.0+, Safari
  32.  xmlHttp=new XMLHttpRequest();
  33.  }
  34. catch (e)
  35.  {
  36.  //Internet Explorer
  37.  try
  38.   {
  39.   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  40.   }
  41.  catch (e)
  42.   {
  43.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  44.   }
  45.  }
  46. return xmlHttp;
  47. }

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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
FrankThePostman is offline Offline
3 posts
since Apr 2008
Permalink
Apr 25th, 2008
0

Re: Dynamic Div Name getElementById

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

/**/
JavaScript Syntax (Toggle Plain Text)
  1. var xmlHttp;
  2. var id_to_disp;
  3. function showDetails(str, control) // here itself u deside which div u want to use
  4. { 
  5.    if(control.name="control1") {
  6.        id_to_disp = 'div_content_details_1';
  7.    }
  8.   .......
  9.  
  10.  
  11. document.getElementById(id_to_disp).innerHTML=xmlHttp.responseText
  12. ..
/**/

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

Thanks,
VinothKumar.C
<snipped>
Last edited by peter_budo; Apr 26th, 2008 at 3:33 pm. Reason: 1)Please use [code] tags. 2) Please do not use "leet" speak or "chatroom" speak. 3) No emails or phone numbers in posts!
Reputation Points: 19
Solved Threads: 3
Light Poster
vinothkumarc is offline Offline
28 posts
since Apr 2008
Permalink
Apr 26th, 2008
0

Re: Dynamic Div Name getElementById

You may try to replace your line
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.getElementById("full-details").innerHTML=xmlHttp.responseText
with a line like:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. eval("document.getElementById('"+full-details+"').innerHTML=xmlHttp.responseText");
Reputation Points: 10
Solved Threads: 4
Newbie Poster
HenryGR is offline Offline
24 posts
since Mar 2008
Permalink
Apr 27th, 2008
0

Re: Dynamic Div Name getElementById

Click to Expand / Collapse  Quote originally posted by 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

/**/
JavaScript Syntax (Toggle Plain Text)
  1. var xmlHttp;
  2. var id_to_disp;
  3. function showDetails(str, control) // here itself u deside which div u want to use
  4. { 
  5.    if(control.name="control1") {
  6.        id_to_disp = 'div_content_details_1';
  7.    }
  8.   .......
  9.  
  10.  
  11. document.getElementById(id_to_disp).innerHTML=xmlHttp.responseText
  12. ..
/**/

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
FrankThePostman is offline Offline
3 posts
since Apr 2008
Permalink
Apr 27th, 2008
0

Re: Dynamic Div Name getElementById

Click to Expand / Collapse  Quote originally posted by HenryGR ...
You may try to replace your line
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.getElementById("full-details").innerHTML=xmlHttp.responseText
with a line like:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
FrankThePostman is offline Offline
3 posts
since Apr 2008
Permalink
Apr 28th, 2008
0

Re: Dynamic Div Name getElementById

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Apr 30th, 2008
0

Re: Dynamic Div Name getElementById

> You can't use getElementById to access elements added by a script.
Bosh. Please verify the facts before stating something.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.             "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.     <meta http-equiv"Script-Content-Type" content="text/javascript">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <meta http-equiv="Expires" content="0"> <!-- disable caching -->
  8.     <title>Example</title>
  9.     <script type="text/javascript">
  10.     function addElem(frm) {
  11.       if(!frm)
  12.         return;
  13.       var d = document.createElement("DIV");
  14.       d.id = "thirdDiv";
  15.       d.innerHTML = "ThirdDiv";
  16.       frm.appendChild(d);
  17.     }
  18.  
  19.     function showDiv(frm) {
  20.       if(!frm)
  21.         return;
  22.       var divs = document.getElementsByTagName("DIV");
  23.       if(!divs)
  24.         return;
  25.       for(var i = 0, maxI = divs.length; i < maxI; ++i) {
  26.         alert("DIV-" + (i + 1) + ": " + divs[i].id);
  27.       }
  28.     }
  29.  
  30.     function showNewDiv(frm) {
  31.       if(!frm)
  32.         return;
  33.       var e = document.getElementById("thirdDiv");
  34.       if(e) {
  35.         alert("The ID of newly added DIV is: " + e.id);
  36.       } else {
  37.         alert("First click on the 'Add DIV' button");
  38.       }
  39.     }
  40.     </script>
  41. </head>
  42. <body>
  43.   <form id="frm" name="frm" action="#">
  44.     <div id="firstDiv">FirstDiv</div>
  45.     <br>
  46.     <div id="secondDiv">SecondDiv</div>
  47.     <br>
  48.     <input type="button" value="Add DIV" onclick="addElem(this.form);">
  49.     <br><br>
  50.     <input type="button" value="Show all DIV's" onclick="showDiv(this.form);">
  51.     <br><br>
  52.     <input type="button" value="Show new DIV" onclick="showNewDiv(this.form);">
  53.     <br>
  54.   </form>
  55. </body>
  56. </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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. // Here 'id' is the ID of the element passed to the showDetails function
  2. xmlHttp.onreadystatechange = function(myId) {
  3.   return function() {
  4.     if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
  5.       document.getElementById(myId).innerHTML=xmlHttp.responseText;
  6.     } 
  7.   }
  8. }(id);
Super Moderator
Featured Poster
Reputation Points: 3233
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,871 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Rotating image gallery - highlight border of current image displayed
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to get the timespan a visitor stays on site before bouncing away?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC