Jump to content

Div In An While Loop


Muiter
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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;}

Link to comment
Share on other sites

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;}}

Link to comment
Share on other sites

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\';">

Edited by Muiter
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;  }};

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 3 weeks later...

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...