PHP & AJAX Script problem

Sam Granger · #1 12-21-2005, 06:57 PM

search.php

PHP Code:


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

HTML Code:

<!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** · #2 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

Code:

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 · #3 12-21-2005, 07:15 PM

Perfect!! Thanks mate!

Works like a dream

Sam Granger · #4 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 · #5 12-22-2005, 04:33 AM

Not a clue ^^

**chazzy** · #6 12-22-2005, 05:24 AM

pressing enter submits your form, this line is wrong

Code:

<form action="post">

should be

Code:

<form action="#" method="post">

see if that helps any.

Sam Granger · #7 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** · #8 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 · #9 12-22-2005, 03:45 PM

Quote:

Originally Posted by Sam Granger

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

PHP Code:


			
<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 · #10 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** · #11 12-22-2005, 09:33 PM

Quote:

Originally Posted by bokeh

Something like the following works in firefox and IE (but I'm no javascript expert).

PHP Code:


			
<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

Code:

document.getElementById('searchterm').onkeyup = keyHit;

bokeh · #12 12-23-2005, 04:11 AM

Quote:

Originally Posted by chazzy

The only change I'd recommend is for it to reference the text box, so

Code:

document.getElementById('searchterm').onkeyup = keyHit;

By the way I believe the the number is different for onkeydown, onkeypress, and onkeyup.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)