Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3373 | Replies: 6
 |
•
•
Join Date: Apr 2008
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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:
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:
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 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.
•
•
Join Date: Apr 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
/**/
/**/
Sorry if anything wrong... bcoz i might not know wt ur thinking
Thanks,
VinothKumar.C
<snipped>
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)
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!
•
•
Join Date: Mar 2008
Location: Madrid - Spain
Posts: 20
Reputation:
Rep Power: 1
Solved Threads: 3
Newbie Poster
You may try to replace your line
with a line like:
document.getElementById("full-details").innerHTML=xmlHttp.responseText eval("document.getElementById('"+full-details+"').innerHTML=xmlHttp.responseText"); You keep going, have a Nice day!
Henry.
Before printing this message, make sure is necessary.
Henry.
Before printing this message, make sure is necessary.
•
•
Join Date: Apr 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
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)
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.
•
•
Join Date: Apr 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by HenryGR
You may try to replace your line
with a line like:document.getElementById("full-details").innerHTML=xmlHttp.responseText
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.
•
•
Join Date: Jan 2007
Posts: 2,640
Reputation:
Rep Power: 7
Solved Threads: 118
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
•
•
Join Date: Jun 2006
Location: India
Posts: 7,054
Reputation: 
Rep Power: 25
Solved Threads: 372
> You can't use getElementById to access elements added by a script.
Bosh. Please verify the facts before stating something.
> 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:
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); I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
