Div In An While Loop

[Muiter]

<?php<td class="dr" colspan="10"> <div id="details"> </div> </td>?>

This div above from the code below is always shown belows my first line in the table instead of below each line where it belongs to. What is wrong?(the div is filled bij AJAX)When I use tis the part xxxxxxx is below each line as it should.

<?php<td class="dr" colspan="10"> <div id="details"> xxxxxxx </div> </td>?>

Part of code:

<?phpwhile ($row = mysql_fetch_array($res))		{			if ($row['actief'] == "ja")			{			echo 				'<tr onmouseover="this.className=\'dr_highlight\'" onmouseout="this.className=\'dr\'" onclick="showDetails('.$row['id'].')" class="dr">				<td><a href=adres_edit.php?id='.$row['id'].' title="Bewerk item"><img border="0" src="images/icon/edit.png"</a>  <a href=contactpersoon.php?id='.$row['id'].' title="Bekijk contactpersonen"><img border="0" src="images/icon/contacts.png"</a></td>				<td>'. htmlentities( $row['klantnaam'] ).'</td>';			if ($row['aflever_adres']==$row['adres'])			echo				'<td width="150">'.$row['aflever_adres'].'</td>';			else			echo				'<td width="150">'.$row['aflever_adres'].' <br /> '.$row['adres'].'</td>';							if ($row['aflever_postcode']==$row['postcode'])			echo				'<td>'.$row['aflever_postcode'].'</td>';			else			echo				'<td>'.$row['aflever_postcode'].' <br /> '.$row['postcode'].'</td>';						if ($row['aflever_plaats']==$row['plaats'])			echo				'<td>'. htmlentities( $row['aflever_plaats'] ).'</td>';			else			echo				'<td>'. htmlentities( $row['aflever_plaats'] ).' <br /> '. htmlentities( $row['plaats'] ).'</td>';						if ($row['aflever_land']==$row['land'])			echo				'<td>'. htmlentities( $row['aflever_land'] ).'</td>';			else			echo				'<td>'. htmlentities( $row['aflever_land'] ).' <br /> '. htmlentities( $row['land'] ).'</td>';			echo				'<td width="125">'.$row['tel'].'</td>				<td width="125">'.$row['fax'].'</td>				<td><a href="mailto:'.$row['email'].'" title="Verstuur e-mail">'.$row['email'].'</a></td>				<td><a href="'.$row['www'].'" title="Bezoek website" target="_blank">'.$row['www'].'</a></td>				<td>'.$row['betalingstermijn'].'</td>			</tr>			<tr>				<td class="dr"></td>				<td class="dr" colspan="10"> <div id="details"> </div> </td>			</tr>';			}			else?>

[justsomeguy]

You can't have more than one element with the same ID. If your code prints 10 divs all called "details", and then you use document.getElementById("details").innerHTML = "text", it's only going to update either the first or last element with the ID "details". Each ID needs to be unique, you can't call all of them "details". You should include the row ID or something else with the div ID to make it unique.

[Muiter]

Thank you for you're response. If I'm trying this I have no results at all

<?phpdocument.getElementById("details'.$row['id'].'").innerHTML=xmlhttp.responseText;?>

<?php<div id="details'.$row['id'].'"> </div>?>

My template code is: http://www.w3schools.com/php/php_ajax_database.asp

[justsomeguy]

<?phpdocument.getElementById("details'.$row['id'].'").innerHTML=xmlhttp.responseText;?>That's not PHP code, that's Javascript.<?php<div id="details'.$row['id'].'"> </div>?>.. and that's HTML. Only PHP code goes between PHP tags. You need to change the ID that gets printed to the div, and then edit the showDetails function to add the row ID to the element ID wherever it gets referenced.

[Muiter]

From div id="details" I can make div id="details'.$row['id'].'" to get an unique div in the page it self.How can I make the div unique in this part?var xmlhttp;function showDetails(str){xmlhttp=GetXmlHttpObject();if (xmlhttp==null) { alert ("Browser does not support HTTP Request"); return; }var url="includes/ajax_details_adr.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){if (xmlhttp.readyState==4){document.getElementById("details").innerHTML=xmlhttp.responseText;}}function GetXmlHttpObject(){if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); }if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); }return null;}

[Muiter]

I have tried working withdivnumber = "?q";document.getElementById("details+divnumber").innerHTML=xmlhttp.responseText;but no luck either.

[dsonesuk]

you will to pass the value str to the id ref as this is the value ID from database, when clicked.you might have to set a global variable outside of the functions, so it can be passed between the functions,var divnumber;function one(){code}function two(){code}function three(){code}in below function change to:function showDetails(str){xmlhttp=GetXmlHttpObject();if (xmlhttp==null){alert ("Browser does not support HTTP Request");return;}var url="includes/ajax_details_adr.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);divnumber=str;}now you can use divnumber value to update to required id reffunction stateChanged(){if (xmlhttp.readyState==4){document.getElementById("details"+divnumber).innerHTML=xmlhttp.responseText;}}

[Muiter]

Thanks a lot dsonesuk. I have got it working I'm maken the div visible with onclick="showDetails('.$row['id'].')"Is there a way to create an button to hide the div again.I tried wirh no luck:<img border="0" src="images/icon/div_close.png" alt="Close" onClick="document.getElementById(\'details'.$row['id'].'\').style.display = \'none\';">

[dsonesuk]

you could use a toggle effect to display and clear contents, first click display details, second click clear details.try below: note IE can be temperamental about using innerHTML<?php<div id="details'.$row['id'].'"></div> //NO SPACE between open and close div?>function showDetails(str){if(document.getElementById("details"+str).innerHTML=="") //if empty proceed to show details{xmlhttp=GetXmlHttpObject();if (xmlhttp==null){alert ("Browser does not support HTTP Request");return;}var url="includes/ajax_details_adr.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);divnumber=str;}else{document.getElementById("details"+str).innerHTML=""; //if NOT empty, clear the details from div}}

[Muiter]

I'm getting the error stateChanged is not defined

[justsomeguy]

He showed that at the end of the code, stateChanged is the function you want to run when the response comes back:

function stateChanged(){  if (xmlhttp.readyState==4)  {	document.getElementById("details"+divnumber).innerHTML=xmlhttp.responseText;  }}

In that case, it's updating the innerHTML of the div with the response from the server.If you just have one-time code that needs to run where you don't need to define a separate function to use more than once, you can also use an anonymous function. So instead of this:xmlhttp.onreadystatechange=stateChanged;you could do this:

xmlhttp.onreadystatechange=function(){  if (xmlhttp.readyState==4)  {	document.getElementById("details"+divnumber).innerHTML=xmlhttp.responseText;  }};

[Muiter]

I'm alle new to this kind of scripting and I'm not understanding what you are trying to explain. Can you make it any clearer?

[chibineku]

I promise I don't get paid to plug jQuery as much as I do, but it makes ajax an absolute joke and I highly recommend taking a look at the jQuery ajax methods. But, short of using jQuery, what they're saying is: there are several states that an AJAX request goes through, and each one has connotations, such as 'request failed' or 'request complete' or whatever. The lines xmlhttp.onreadystatechange = function() {if(xmlhttp.readyState == 4) {}}make the anonymous function run every time the readystate of the xmlhttp object changes. If the readyState is 4, then the request has completed successfully and you can now access the response data from the server script. In jQuery, a complete ajax function might look like this:$.ajax('script.name', {'name':value, 'name2':value2}, function(data) { $('details'+divnumber').html(data);}It's alarmingly simple

[Muiter]

I still can't get it work......

[dsonesuk]

this is a rough guide, but this should give you an idea, on how it works.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var divnumber;function GetXmlHttpObject(){ var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support XMLHTTP!"); } return xmlhttp;}function TestPost(sendValues, url, ref){//alert(ref)if(document.getElementById("response"+ref).innerHTML=="" || document.getElementById("response"+ref).innerHTML==null) //if empty proceed to show details{document.getElementById("response"+ref).style.fontSize="16px"; xmlhttp=GetXmlHttpObject(); xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET", url, true); divnumber=ref; xmlhttp.send(null); }else //else if details are already displayed, clear it {document.getElementById("response"+ref).innerHTML="";document.getElementById("response"+ref).style.fontSize="0px"; //required for IE as its height is determined by font-size even though it is empty}} function stateChanged(){if (xmlhttp.readyState==4){//alert(divnumber)document.getElementById("response"+divnumber).innerHTML= xmlhttp.responseText; }}/*--*//*]]>*/</script> <style type="text/css"></style></head><body><?phpfor($i=1;$i<3;$i++) //this is supposed to represent your while loop. $i is used to identify which ref was clicked, and show/hide the details relating to it.{?><a href="java script:void(null);" onclick="TestPost('test<?php echo $i; ?>=testvalue', 'test<?php echo $i; ?>.php','<?php echo $i; ?>')">show/hide</a><div id="response<?php echo $i; ?>"></div><?php}?></body></html>