PDA

Click to See Complete Forum and Search --> : PHP & AJAX Script problem

Sam Granger
12-21-2005, 06:57 PM
search.php

<?php

if (isset($_GET['q']) === FALSE) {

exit();
}
$root = '../';
include($root . 'connect.php');



$sQuery =
"SELECT *
FROM news
WHERE NewsContent LIKE '%". mysql_real_escape_string(trim($_GET['q'])) ."%'";

$rResult = mysql_query($sQuery);
if ($rResult === FALSE) {

print 'Kon de query '. $sQuery .' niet uitvoeren.';

}

$aTmp = array();


if (mysql_num_rows($rResult) == 0) {

print 'No Results';
}

else {

while ($aTmp = mysql_fetch_assoc($rResult)) {

echo "<h1>{$aTmp['NewsTitle']}</h1>";
echo substr($aTmp['NewsContent'],0,300) . '...';
echo "<a href=\"{$aTmp['Url']}\" title=\"{$aTmp['NewsTitle']}\">Read More</a><br />";
}
}

?>
search.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Live zoeken in je database.</title>
<script language="Javascript" type="text/javascript">

// Het script die daadwerkelijk het zoeken doet
var url = "./scripts/search.php?q=";

function handleHttpResponse() {
// Hier wordt de output van het script gehaald.
if (http.readyState == 4 && http.status == 200) {
document.getElementById('results').innerHTML = http.responseText;
}
}

var done = false;

function liveSearch() {
if (!done && http) {

var term = document.getElementById('searchterm').value;
document.getElementById('results').innerHTML = "";
http.open('GET', url + term, true);
http.onreadystatechange = handleHttpResponse;
done = true;
http.send(null);
}
}


function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();

</script>
</head>
<body>
<form action="post">
<p>Zoekterm:</p>
<input type="text" id="searchterm" value="">
<input type="button" id="search" value="Zoek!" onclick="liveSearch();">
</form>
<div id="results">&nbsp;</div>
</body>
</html>

The above script searches a database and it displays results. It all works. However, once I see the results, I can't search again without refreshing the search.html - even though I still can see the search box etc...

How can I make it so that when I would click on search again it clears all the current results and displays the newer results?

Thanks in advance,

Sam
chazzy
12-21-2005, 07:09 PM
it's because you're setting done to true when complete. why do you need this?
you can try this though

function handleHttpResponse() {
// Hier wordt de output van het script gehaald.
if (http.readyState == 4 && http.status == 200) {
document.getElementById('results').innerHTML = http.responseText;
done = false;
}
}
Sam Granger
12-21-2005, 07:15 PM
Perfect!! Thanks mate! :)

Works like a dream :)
Sam Granger
12-22-2005, 04:25 AM
Also, to search I have to press the button. I can't press enter because i get redirected to "www.domain.com/post?"

Any tips?
SpectreReturns
12-22-2005, 04:33 AM
Not a clue ^^
chazzy
12-22-2005, 05:24 AM
pressing enter submits your form, this line is wrong <form action="post"> should be <form action="#" method="post"> see if that helps any.
Sam Granger
12-22-2005, 07:01 AM
Thanks - that worked. but now i've make it on keyup and down press that it displays results without even pressing the search button. (I removed the search button too)but how do i make that pressing enter doesn't do anything at all (at the moment it sort of refreshes the page).
chazzy
12-22-2005, 12:38 PM
that's browser dependent behavior, IIRC, and you really shouldn't play with it (because fixing it in a browser may break your form in another, for example)
the best place to ask that is in the javascript forum, they might be able to give you some pointers.
bokeh
12-22-2005, 03:45 PM
how do i make that pressing enter doesn't do anything at all.Something like the following works in firefox and IE (but I'm no javascript expert).<head>
<script type="text/javascript">
document.onkeydown = keyHit;
var thisKey;

function keyHit(evt)
{
if (evt){
thisKey = evt.which;
}else{
thisKey = window.event.keyCode;
}
}

</script>
</head>

<body onkeypress="if(thisKey == 13)return false;">
</body>

As a side note, I've run scripts onkeypress before (see the regex checker in my signature) but you are querying the DB too on each request. Be careful not to overwhelm the server. I don't have any trouble with mine but my server load in general is pretty light.
Sheldon
12-22-2005, 06:07 PM
What about a browser with Javascript disabled, They would not be able to submit hte search form? Maybe use a discret image as a secondry option to submit the form?
chazzy
12-22-2005, 09:33 PM
Something like the following works in firefox and IE (but I'm no javascript expert).<head>
<script type="text/javascript">
document.onkeydown = keyHit;
var thisKey;

function keyHit(evt)
{
if (evt){
thisKey = evt.which;
}else{
thisKey = window.event.keyCode;
}
}

</script>
</head>

<body onkeypress="if(thisKey == 13)return false;">
</body>

As a side note, I've run scripts onkeypress before (see the regex checker in my signature) but you are querying the DB too on each request. Be careful not to overwhelm the server. I don't have any trouble with mine but my server load in general is pretty light.

The only change I'd recommend is for it to reference the text box, so document.getElementById('searchterm').onkeyup = keyHit;
bokeh
12-23-2005, 04:11 AM
The only change I'd recommend is for it to reference the text box, so document.getElementById('searchterm').onkeyup = keyHit;By the way I believe the the number is different for onkeydown, onkeypress, and onkeyup.