Display content onClick link in own page

[Remote Control]

Hi All,

 

I would like to display content in a div depending on which link a user clicks, below is the code that creates the links.

 

<?php
$sql="SELECT * FROM bands ORDER BY title";
//echo $sql;
$res=SQL_query($sql);
echo "<table>";
while ($row=SQL_fetch_array($res)){
		echo "<tr><td>";
		$ren_url=make_redundant_url($row['title']);
		echo "</td><td><a href='release_info.php?id=".$row['id_band']."$ren_url'>".$row['title']."</a></td>";

		echo "</tr>";
}			
echo "</table>";			
?>

 

And here is the code I would like to display when the link is clicked

 

<?phpwhile ($row=SQL_fetch_array($res)){

		if ($flag==0){
				echo "<h1></h1> 
								</div>
								<div class=\"content_holder\"><div class=\"catalogue_item\">";

			if ($row['mp3']<>""){
				echo "<p><b>Download MP3:</b> <a href=\"uploads/mp3s/".$row['mp3']."\">".$row['mp3']."</a></p><br>";
			}
			echo "<b>Releases:</b><br>";
			$flag=1;
		}
		//TODO: new catalogue page.
		$ren_url=make_redundant_url($row['bandname'],$row['title']);
		echo "<img src='tinyimage.php?file=uploads/releases/".$row['imageurl']."' border='0'><a href='release_detail.php?id=".$row['id_release']."$ren_url'>".$row['bandname']." "".$row['title']."" ".$row['type']." $".$row['price']." (".$row['catnum'].")</a>";
			 if ($row['new']==1){
				echo " <b><font color='#FF0000'>NEW!!</font></a></b> ";
			 }			
			 if ($row['sold_out']==0){
						echo "  (<a href='basket.php?add="."cd_".substr($row['catnum'],-3)."'><i>Add To Basket</i></a>)";
			 }
		echo "<br>";
}?>

 

What would  be the best way to display this without having to load a new page?

[DeanWhitehouse]

Javascript or Ajax, but this has nothing to do with php so please post in the correct forum sections.

 

 

[Remote Control]

Ok thanks, if i post it there can you help?

[DeanWhitehouse]

Don't repost, just remeber for the future. I will not write the code for you, but will point you in the direction.

How i would do it is using Javascript, with the onclick event, and either use innerHTML or just css visibility property's.

 

e.g.

<script>
function ClickMeInnerHTML(ID)
{
div = document.getElementById(ID);
div.innerHTML = "This was wrote by javascript"
}

function clickMeCSS(ID)
{
div = document.getElementById(ID);
div.style.visibility = "visible"// if it doesnt work try div.style.visibility = true
}
</script>

<a href="Javascript:ClickMeInnerHTML('test2');">Inner HTML</a>
<a href="Javascript:clickMeCSS('test');">CSS way</a>
<span id="test" style="visibility:hidden;">Hidden then revealed</span>
<br>
<span id="test2"></span>

Un-tested.

[Remote Control]

And how do I make the link display the content from the database after clicked?

[DeanWhitehouse]

I am not writing this for you. But an example would be either

div.innerHTML = "<?php echo " Put database stuff here"; ?>"

or

<span id="test" style="visibility:hidden;"><?php echo "DB stuff here"; ?></span>

[kenrbnsn]

Moving this from PHP to Javascript.

 

Ken

[Adam]

I think he wants to return a full page, not just a string of text?

 

Like Blade said earlier, look into AJAX and how you can make HTTP requests, a good example of what we're talking about is .. http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_httprequest_js1

 

But I'd have a good read through a tutorial first before trying to make your own..

 

If you were to setup your own javascript function which used AJAX to return a page, you could simply have the links set to something like:

 

<a href="javascript:loadPage('mypage.php');">My Page</a>

 

and a quick tip for you, because not every user has JS, you'd be best using:

 

<a href="mypagefull.php" onclick="loadPage('mypage.php'); return false;">My Page</a>

 

Which in the circumstance that the function fails to return the page, or the user has JS disabled, will just redirect them to the actual page and avoid any loss of function..

 

Post was a bit rushed cause I'm about to leave work

 

Adam