CODEWITHSUNDEEP
phpjquery
Jshee
Jshee

Reputation: 2686

Why isnt this ajax live search working

**Updated code as of 3-28

Index.php

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery Search Demonstration</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
            $(".keywords").keyup(function(){
                $('#key').html($(this).val());
                $('#table').html($('.table:checked').val());

                // Do the ajax call
                // Get the textbox value: $(this).val()
                // Get the radio value: $('.table:checked').val()

                /*$.post("search.php", { keywords: $(".keywords").val() }, function(data){
                    $("div#content").empty()
                    $.each(data, function(){
                        $("div#content").append("- <a href='prof.php?pID=" + this.pID + "'>" + this.last + "</a>");
                    });
                }, "json");*/
            });
        });
    </script>
    </head>
    <body>
    Search by:
    <input type="radio" name="table" class="table" value="Table 1" />Professor<br />
    <input type="radio" name="table" class="table" value="Table 2" />Department<br />
    <input type="radio" name="table" class="table" value="Table 3" />Course<br />

    <input type="text" name="search" class="keywords">
    <input type="submit" name="submit" class="search">
    <div id="content">
    </div>
    </body>
    </html>

Search.php

<?php
$link = mysql_connect('##',"##","##");
mysql_select_db("###", $link);

$keywords = mysql_real_escape_string( $_POST["keywords"] );

$query = mysql_query("SELECT pID, lname, fname 
                                    FROM Professor 
                                    WHERE CONCAT(lname,fname) LIKE '%". $keywords . "%'");

$arr = array();
while( $row = mysql_fetch_array ( $query ) )
{
    $arr[] = array( "pID" => $row["pID"], "last" => $row["lname"], "first" => $row["fname "] );
}

echo json_encode( $arr );
?>

Sql for each selection: [Professor]

SELECT pID, lname, fname 
                                    FROM Professor 
                                    WHERE CONCAT(lname,fname) LIKE '%". $keywords . "%'";

[Department]

SELECT prefix, code 
                                    FROM Department 
                                    WHERE name LIKE '%". $keywords . "%'";

[course]

SELECT prefix, code FROM Course WHERE CONCAT(prefix,course) LIKE '%". $keywords . "%'";

Upvotes: 0

Views: 498

Answers (2)

Khoa Nguyen
Khoa Nguyen

Reputation: 1317

You should change your query like this:

$query = mysql_query("SELECT pID, lname, fname 
                                    FROM Professor 
                                    WHERE CONCAT(lname,fname) LIKE '%". $keywords . "%'");

Please make sure this these fields in json and javascript are the same:

$arr[] = array( "id" => $row["pID"], "last" => $row["lname"], "first" => $row["fname"] );

$("div#content").append("- <a href='post.php?id=" + this.id + "'>" + this.first + " " + this.last + "</a>");

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Search Demonstration</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".keywords").keyup(function(){
        getData();
    });
    $(".table").click(function(){
        getData();
    });
});

function getData(){
    $.post("search.php", 
        {
            keywords: $(".keywords").val(),
            table: $('.table:checked').val()
        }, 
        function(data){
            $("div#content").empty();
            var phppage;
            switch($('.table:checked').val())
            {
                case 'professor': 
                    phppage = 'prof';
                    break;
                case 'department': 
                    phppage = 'department';
                    break;
                case 'course': 
                    phppage = 'course';
                    break;
            } 

            $.each(data, function(){
                $("div#content").append("- <a href='" + phppage + ".php?pID=" + this.id + "'>" + this.name + "</a>");
            });
        },
        "json");
}
</script>
</head>
<body>
Search by:
<input type="text" name="search" class="keywords" /><br />

<input type="radio" name="table" class="table" value="professor" checked="checked" /> Professor<br />
<input type="radio" name="table" class="table" value="department" /> Department<br />
<input type="radio" name="table" class="table" value="course" /> Course<br />

<div id="content"></div>

</body>
</html>

PHP code:

<?php
$link = mysql_connect('localhost',"#","#");
mysql_select_db("#", $link);

$arr = array();
$keywords = mysql_real_escape_string( $_POST["keywords"] );
switch ($_POST["table"])
{
    case 'professor';
        $arr = getProfessor($keywords);
        break;
    case 'department';
        $arr = getDepartment($keywords);
        break;
    case 'course';
        $arr = getCourse($keywords);
        break;
}

echo json_encode( $arr );

function getProfessor($keywords){
    $arr = array();

    $query = mysql_query("SELECT pID, lname, fname 
                            FROM Professor 
                            WHERE CONCAT(lname,fname) LIKE '%". $keywords . "%'");

    while( $row = mysql_fetch_array ( $query ) )
    {
        $arr[] = array( "id" => $row["pID"], "name" => $row["fname"] . ' ' . $row["lname"]);
    }

    return $arr;
}

function getDepartment($keywords){
    $arr = array();

    $query = mysql_query("SELECT prefix, code 
                            FROM Department 
                            WHERE name LIKE '%". $keywords . "%'");

    while( $row = mysql_fetch_array ( $query ) )
    {
        $arr[] = array( "id" => $row["code"], "name" =>  $row["code"]);
    }

    return $arr;
}

function getCourse($keywords){
    $arr = array();

    $query = mysql_query("SELECT prefix, code 
                            FROM Course 
                            WHERE CONCAT(prefix,course) LIKE '%". $keywords . "%'");

    while( $row = mysql_fetch_array ( $query ) )
    {
        $arr[] = array( "id" => $row["code"], "name" => $row["code"]);
    }

    return $arr;
}
?>

Upvotes: 1

acqu13sce
acqu13sce

Reputation: 3809

It looks like in your javascript you're trying to access the .id and .title properties of the returned json objects but they don't exist from the array you create in php

$arr[] = array( "id" => $row["pID"], "title" => $row["lname"]." ".$row["fname"] );

Does that work?

EDIT:

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

Looks like that is missing a closing brace to enclose the $.each

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

Upvotes: 0

Related Questions