Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: open

Message Too Old, No Replies

PHP Search Using AJAX

   
2:53 pm on Aug 27, 2012 (gmt 0)



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.
4:44 am on Aug 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

Instead of "//DO I NEED THIS FUNCTION?" maybe ?
8:17 am on Aug 28, 2012 (gmt 0)



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);
}
1:29 pm on Aug 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



As the reply data is json, 'html' is a curious name to choose for the reply ?
7:35 pm on Aug 28, 2012 (gmt 0)



I wasn't aware that's what that actually is for. Would it be best to rename to response, result or something like that?
11:53 pm on Aug 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
6:10 pm on Sep 23, 2012 (gmt 0)



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?
2:35 pm on Sep 25, 2012 (gmt 0)



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.
11:32 pm on Sep 26, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

and so on ?
1:42 pm on Sep 28, 2012 (gmt 0)



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