PHP Search Using AJAX

[LinusIT]

Hi everyone

I've made a search script for a site, it works but I'd like to see if there's a better way of doing it. It's a simple form and a small piece of javascript to display the results.

Javascript

<script language="javascript">
$(document).ready(function(){

$("#search-form").hide();

$('.till_search').click(function(e){
e.preventDefault();
var search_ref = $("input#search").val();
var dataString = 'search='+ search_ref + '&till_search="True"';
$.ajax({
type: 'POST',
url: 'includes/process.php',
data: dataString,
cache: false,
//dataType: "json",
success: function(html) {
//DO I NEED THIS FUNCTION?
}
});

$('#search-form').dialog({
title: "Result",
draggable: false,
resizable: false,
modal: true,
autoOpen: false,
width: 280,
height: 200,
buttons: {
"Close": function() {
$(this).dialog('close');
},
}
});

$('#search-form').dialog('open');
return false;
});
});

</script>

PHP

if(isset($_POST['till_search'])){
$sql = "SELECT * FROM till_log WHERE tl_ref LIKE '%$_POST[search]%'";
$result = mysql_query($sql) or die(mysql_error());
$num_rows = mysql_num_rows($result);
if ($num_rows > 0) {
$_SESSION['search_result'] = "Result Found - Speak to Monty for more Info";
} else {
$_SESSION['search_result'] = "No Result Found - Don't Speak to Monty";
}
}

HTML (Result)

<div id="search-form" class="ui-dialog">
<p class="validateTips"><?php if (isset($_SESSION['search_result'])) { echo $_SESSION['search_result']; } ?></p>
</div>

You'll notice I haven't unset the session anywhere in the code, I've done this just incase sessions isn't the best way forward.

Appreciate your time looking at this, thank you.

[daveVk]

I can not see in the JavaScript where the result is displayed ?

Instead of "//DO I NEED THIS FUNCTION?" maybe ?

[LinusIT]

I messed about with this some more yesterday and found that it doesn't actually work. The page is loaded, the session is set using the ajax request but until the page is refreshed it doesn't know about the session. I've got it working now, i'll post the code incase anyone else finds it useful

Javascript

success: function(html) {
if (html.error) {
$("#search-form").html("<div class=\"warning\">No Results Found</div>" );
} else {
$("#search-form").html("<p><span class=\"label\">Date:</span> " + html.date + "</p>" +//);
"<p><span class=\"label\">Reference:</span> " + html.ref + "</p>" + //);
"<p><span class=\"label\">Amount:</span> " + html.amount + "</p>" + //);
"<p><span class=\"label\">Detail:</span> " + html.detail + "</p>");
}
}

PHP

if ($num_rows > 0) {
$arr = array("date" => $date, "ref" => $ref, "amount" => $amount, "detail" => $detail);
echo json_encode($arr);
} else {
$arr = array("error" => "No Result Found");
echo json_encode($arr);
}

[daveVk]

As the reply data is json, 'html' is a curious name to choose for the reply ?

[LinusIT]

I wasn't aware that's what that actually is for. Would it be best to rename to response, result or something like that?

[daveVk]

Maybe

success: function(jsonReply) {
if (jsonReply.error) {
$("#search-form").html("<div class=\"warning\">No Results Found</div>" );
} else {
$("#search-form").html("<p><span class=\"label\">Date:</span> " + jsonReply.date + "</p>" +//);
"<p><span class=\"label\">Reference:</span> " + jsonReply.ref + "</p>" + //);
"<p><span class=\"label\">Amount:</span> " + jsonReply.amount + "</p>" + //);
"<p><span class=\"label\">Detail:</span> " + jsonReply.detail + "</p>");
}
}

You can change the red word to whatever you think relevent.

[LinusIT]

I've been working on this and it's come along quite well until I had another idea. Basically 3 result sets: 1 result - multiple results - no results. It was previously working fine with just 1 result and no results.

AJAX:

$.ajax({
type: 'POST',
url: 'includes/process.php',
data: dataString,
dataType: "json",
cache: false,
success: function(response) {
//alert (JSON.stringify(response)); //Show JSON Alert
if (response.success) {
$("#search-form").html("<p><span class=\"label\">Date:</span> " + response.date + "</p>" +
"<p><span class=\"label\">Reference:</span> " + response.ref + "</p>" +
"<p><span class=\"label\">Amount:</span> &pound;" + response.amount + "</p>" +
"<p><span class=\"label\">Detail:</span> " + response.detail + "</p>");
} else if (resonse.multiple) {
$("#search-form").html("<div class=\"info\">Multiple Results Found<br />Please Use Advanced Search</div>" );
} else if (response.error) {
$("#search-form").html("<div class=\"warning\">No Results Found</div>" );
}
}
});

PHP Search:

$num_rows = mysql_num_rows($result);
if ($num_rows == 1) {
while ($row=mysql_fetch_array($result)) {
$date = date("d F Y",strtotime($row['tl_date']));
$ref = $row['tl_ref'];
$in = $row['tl_in'];
$out = $row['tl_out'];
$detail = $row['tl_detail'];
}
if ($in > 0) {
$amount = $in;
} else {
$amount = $out;
}
$arr = array("success" => "true", "date" => $date, "ref" => $ref, "amount" => number_format($amount,2), "detail" => $detail);
echo json_encode($arr);
} else if ($num_rows > 1) {
$arr = array("multiple" => "true");
echo json_encode($arr);
} else {
$arr = array("error" => "true");
echo json_encode($arr);
}

Using alert (JSON.stringify(response)); I can see that it's working fine on the PHP side, the alerts show the correct result. There must be something wrong in my success function.

What's happening is when you search "xxxxxx" it should show "No results" warning but doesn't show anything, when searching for "Start" it should show "Multiple Results" warning but again I get an empty dialog box. When I search for something I know there is only one of I get the correct information in the dialog box.

Another thing I'd like to ask.. You'll notice I've got "success = true", "multiple = true" & "error = true" in my PHP code. I would like to change this to

$arr = array("result" => "success");
$arr = array("result" => "multiple");
$arr = array("result" => "error");

What would I need to change in my success function to act on the data inside the result key?

[LinusIT]

I've solved the problem, a simple spelling mistake can cause havoc. I spelt response wrong } else if (resonse.multiple) {

Now that's working can anyone assist with the other query. Whereby in the php array I have "result" => "success/multiple/error" and then be able to use the result in Jquery.

I hope that makes sense.

[daveVk]

if (response.success) {
becomes
if (response.result === "success" ) {

and so on ?

[LinusIT]

Thanks for that, is so simple now you've pointed it out.