JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Dynamic Div Name getElementById

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2008
Posts: 3
Reputation: FrankThePostman is an unknown quantity at this point 
Solved Threads: 0
FrankThePostman FrankThePostman is offline Offline
Newbie Poster

Dynamic Div Name getElementById

 
0
  #1
Apr 25th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 28
Reputation: vinothkumarc is an unknown quantity at this point 
Solved Threads: 3
vinothkumarc vinothkumarc is offline Offline
Light Poster

Re: Dynamic Div Name getElementById

 
0
  #2
Apr 25th, 2008
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!
Thanks & Regards,
VinothKumar C
post2vinoth@gmail.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 24
Reputation: HenryGR is an unknown quantity at this point 
Solved Threads: 3
HenryGR's Avatar
HenryGR HenryGR is offline Offline
Newbie Poster

Re: Dynamic Div Name getElementById

 
0
  #3
Apr 26th, 2008
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");
You keep going, have a Nice day!
Henry.

Before printing this message, make sure is necessary.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 3
Reputation: FrankThePostman is an unknown quantity at this point 
Solved Threads: 0
FrankThePostman FrankThePostman is offline Offline
Newbie Poster

Re: Dynamic Div Name getElementById

 
0
  #4
Apr 27th, 2008
•
•
•
•
Originally Posted by vinothkumarc View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 3
Reputation: FrankThePostman is an unknown quantity at this point 
Solved Threads: 0
FrankThePostman FrankThePostman is offline Offline
Newbie Poster

Re: Dynamic Div Name getElementById

 
0
  #5
Apr 27th, 2008
•
•
•
•
Originally Posted by HenryGR View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Dynamic Div Name getElementById

 
0
  #6
Apr 28th, 2008
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,623
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 468
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Dynamic Div Name getElementById

 
0
  #7
Apr 30th, 2008
> 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);
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine events explorer ext file form forms getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe image() images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl maps math media microsoft object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar rated regex runtime safari scriptlets scroll search security session shopping size software sql star stars synchronous text textarea unicode validation web webservice website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC