How do i do a previous and next buttons with ajax and get different results on same page?
Im fairly new to coding so i need some help. im trying to build a web site for geology ( rocks, etc). My concept is this.
How do i use Ajax to display 3 previous/next results when you onclick(once or many times) a previous/next button and it displays the results each time on the same page?
The current page has 3 results from a query the one on the far right is the latest result.
Here is the code: 2 pages : 1st page is index.php: 2nd page is getuser.php
index.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>index</title>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<br>
<td style="vertical-align: top; text-align: right;">
<br>
<br>
<form name="form" method="Post"><input name="back"
value="Back" type="hidden"> <input src="left.png" style="" 15=""
type="image" border="0" height="15"></form>
<?php
if(isset($_POST['back'])){
not sure here;
}
?>
<div style="text-align: center;">
<div style="text-align: right;"><br>
</div>
<div style="text-align: right;"><br>
<br>
</div>
<br>
</div>
<br>
</td>
<td style="vertical-align: top; text-align: center;"><br>
<?php
$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$sql = "SELECT * FROM `rock` ORDER BY id DESC LIMIT 0,3";
$result = mysql_query($sql);
while($file = mysql_fetch_array($result)){
echo '<li>';
echo '<a href="#" id="'.$file['id'].'" onclick="showUser(this.id)">'.$file['name'].'</a>';
echo '</li>';
}
mysql_close($con);
?>
<div id="txtHint" style="text-align: center;"> </div>
</td>
<td style="vertical-align: top; text-align: left;">
<form name="form" method="Post"><input name="forward"
value="Forward" type="hidden"> <input src="right.png" style="" 15=""
type="image" border="0" height="15"></form>
<br>
<?php
if(isset($_POST['forward'])){
not sure here;
}
?>
</td>
-------------------------------------------------------------------------------------------------
# ** ** getuser.php**** #
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$sql="SELECT * FROM rock WHERE id = '".$q."'";
$result = mysql_query($sql);
while($file = mysql_fetch_array($result)){
echo "<table border='0' align='center'>";
{
echo "<tr>";
echo "<td>" .$file['Name']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>". $file['Color'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>" . $file['Type'] . "</td>";
echo "</tr>";
}
echo "</table>";
}
mysql_close($con);
?>
CAN SOMEONE HELP!!!