Ajax search post error

Question

I need help with two things. First: if I hit empty submit button. It should show me a error. Second: If there is 0 results, it will give an error.

$(document).ready(function(){
    $(".search").click(function(){
        $.post("search.php", { keywords: $(".keywords").val() }, function(data){
            $("div#search").empty()
            $.each(data, function(){
                $("div#search").append("- <a href='#?id=" + this.id + "'>" + this.title + "</a><br>");
            });
        }, "json");
    });
});

--

$query = $db->prepare("SELECT `media`.`id`, `media`.`title` FROM `media` WHERE `media`.`title` LIKE :keywords");

$keywords = (isset($_POST['keywords']) === true) ? $_POST['keywords'] : '';

if (empty($keywords) === true) {
    $error = 'error';
    echo json_encode( $error );
} else {
    $query->bindValue(':keywords', '%' . $keywords . '%', PDO::PARAM_STR);
    $arr = array();
    $query->execute();
    while( $row = $query->fetch(PDO::FETCH_ASSOC) ) {
        $arr[] = array( "id" => $row["id"], "title" => $row["title"]);
    }
    echo json_encode( $arr );
}

wat do you mean by ": if I hit empty submit button. "?

William Buttlicker
– William Buttlicker

2013-02-27 13:56:05 +00:00
Commented Feb 27, 2013 at 13:56 — William Buttlicker
– William Buttlicker, Commented Feb 27, 2013 at 13:56
Maybe error message could help. Post it.

Ghigo
– Ghigo

2013-02-27 13:59:02 +00:00
Commented Feb 27, 2013 at 13:59 — Ghigo
– Ghigo, Commented Feb 27, 2013 at 13:59
jsfiddle.net/Vpxrx my script

sw0o0sh
– sw0o0sh

2013-02-27 15:27:21 +00:00
Commented Feb 27, 2013 at 15:27 — sw0o0sh
– sw0o0sh, Commented Feb 27, 2013 at 15:27

Husman · Accepted Answer · 2013-02-27 16:50:07Z

OK I have painstakingly recreated (jsfiddle does not let you copy/paste) this on my local machine. Your html/js code should look like this:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" name="search" class="keywords">
        <input type="submit" name="submit" class="search">
        <div id="search"></div>
        <script>
            $(document).ready(function(){
                $(".search").click(function(){
                    $.post(
                        "search.php", 
                        { keywords: $(".keywords").val() }, 
                        function(data){
                              $("div#search").empty()
                          $("div#search").append(data);
                        }, 
                        "json"
                    );
                });
            });
        </script>
    </body>
</html>

And for the PHP search.php page:

<?php
$keywords = (isset($_POST['keywords']) === true) ? $_POST['keywords'] : '';
if (empty($keywords) === true) {
    echo json_encode( "error" );
}
else {
    // run mysql commands
    // if resultset == empty
    // echo json_encode( "error" );
    echo json_encode( "actual data" );
}
?>

To parse json data in javascript do this:

$.post(
  "search.php", 
  { keywords: $(".keywords").val() }, 
  function(data) {
    $("div#search").empty();
    obj = JSON.parse(data);
    $("div#search").append(obj.id + " " + obj.title);
  }, 
  "json"
 );

Your php code does not check for a rowcount of any sort in that jsfiddle. Try getting rid of the php code (comment it all out) and then do a "echo json_encode('test');" and see if the PHP page returns this.
I have it working on my machine (you need to add db code as I dont have your database)
Have a look at my update, on how to parse json data and display it.

Alex · Accepted Answer · 2013-02-27 13:57:50Z

0

try using $(this) instead of this

answered Feb 27, 2013 at 13:57

Alex

1,30411 silver badges20 bronze badges

Collectives™ on Stack Overflow

Ajax search post error

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related