hey ive got a working php script, and as far as i can tell my jquery ajax function mimics anything ive seen on SO, but somehow this wont work. im posting my HTML, php, and js. can someone please help me out here? ive been at this for days without success.
on submit it seems as though the page flickers for a short (refresh?) period, but nothing happens.
HTML/js:
<!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=utf-8" />
<title>Trade diving equipment online at DiveBay</title>
<link rel="stylesheet" type="text/css" href="dbstylesheet.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
%("#searchdivebay").submit(function(){
var word = $("#searchbox").val();
$.ajax({
type: "GET",
url: "trysearch.php",
data: $("#searchdivebay").serialize(),
context: '#content',
success: function(data){
$(this).html(data);
}
});
});
});
</script>
</head>
<body>
<center>
<div id="wrapper">
<div id="header">
<div id="hbackground">
<img src="db3.jpg" alt="hbackground" width="100%" height="100%" style="z-index:1;" />
<div id="htitle">
<span class="banner">DIVEBAY.COM</span>
<span class="byline">GET INTO DIVING, TRADE DIVING EQUIPMENT ONLINE</span>
</div>
</div>
</div>
<div id="searchandlog">
<div id="search">
<form id="searchdivebay" action="#" method="get">
<div id="searchboxholder"><input type="text" name="searchbox" id="searchbox" /></div>
<div id="searchbuttonholder"><input type="submit" name="searchbutton" id="searchbutton" value="Search DiveBay"/></div>
</form>
</div>
<div id="login">
<ul class="signreg">
<li><i>Existing user?</i><a href="divebaylogin.html">SIGN IN</a></li>
<li><i>or, new?</i><a href="createaccount.html">REGISTER</a></li>
</ul>
</div>
</div>
<div id="searchresults">Search results for <span id="searchword" class="word"></span></div>
<div id="content">
</div>
<div id="sitemap">
</div>
</div>
</center>
</body>
</html>
PHP:
<?php
echo '
<?xml version = "1.0" encoding = "utf-8"?>
<!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>
<title>searchdbresults</title>
<link rel="stylesheet" type = "text/css" href = "styledb.css" />
</head>
<body>';
$user = 'root';
$pass = null;
$pdo = new PDO('mysql:host=localhost; dbname=divebay;', $user, $pass);
$search = $_GET['searchbox'];
if($search == ""){
echo '<p style="color:black; font-size:18pt; font-family: Impact; "> You didn"t search for anything!</p>';
}
else{
try{
$stmt = $pdo->prepare('SELECT * FROM auction WHERE name LIKE ?');
$stmt->bindValue(1, '%'. trim($search) .'%');
$stmt->execute();
$numrows = 0;
echo '<table id="showresult">';
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$numrows++;
$ID = $row['ID'];
$img = $row['img'];
$name = $row['name'];
$owner = $row['owner'];
$cprice = $row['cprice'];
$iprice = $row['iprice'];
$incprice = $row['incprice'];
$etime = $row['etime'];
echo '
<tr class = "resultindex">
<td class = "imgholder">' .$img. '</td>
<td class = "infoholder">
<div style ="height:4px;"></div>
<div class = "infodiv">'.$name.'</div>
<div class = "locdiv"></div>
<div class = "userdiv"><span class="fromuser">From user: </span><br/>'.$owner.'</div>
</td>
<td style = "width:2px; background-color:#330066;"></td>
<td class ="priceholder">
<div class = "currentp"><span class="currentbid">Current Bid: </span><br/>'.$cprice.'</div>
<div class = "instantp"><span class="instantbid">Instant Sale: </span><br/>'.$iprice.'</div>
<div style = "height:5px;"></div>
<div class = "incp"><span class="nextbid">Next Bid:</span><br/>'.$incprice.'</div>
</td>
<td style = "width:2px; background-color:#330066;"></td>
<td class = "timer"><span class="timeleft">Time Left: </span><br/>'.$etime.'</td>
</tr>';
}
if($numrows == 0){
echo '
<tr>
<td colspan="4">Sorry your search for '.$search.' returned no results</td>
</tr>';
}
else{
echo '
<tr>
<td colspan="4">Displaying'.$numrows.'results</td>
</tr>';
$pdo = null;
}
}catch(PDOException $e){
echo $e->getMessage();
}
}
echo '
</table>
</body>
</html>';
?>
You need to create a separate PHP file as your Ajax handler which returns only the HTML that is supposed to go in the
contentsection of your search results.Right now, you are returning a complete HTML page would break the semantics and the structure of the DOM.
You’re seeing a flicker because the page automatically refreshes when you click the submit button. You need to call the
e.preventDefault()method to prevent that, orreturn falseat the end of yoursubmithandler.