CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
user3181236
user3181236

Reputation: 357

Searching MySQL database with PHP, AJAX and jQuery

I'm trying to write a very simple search system where the user searches for a product in a small database of only about 50 entries. I'm trying to use jQuery and AJAX to send the search query to an external PHP script which performs the actual MySQL query and returns a list of results which I can then append on to the search page.

I have this for my search page:

<form method="get">
   <input type="text" id="searchbox" name="search"/>
   <button class="button" id="searchbutton">Search</button>
</form>


<script type="text/javascript">

    function makeAjaxRequest() {
    $.ajax({
        url: 'search_execute.php',
        type: 'get',
        datatype: 'html',
        data: {search: $('#searchbox').val()},
        success: function(response) {
            alert("Success!");
        }, error : function() {
            alert("Something went wrong!");
       }
    });


});

//capture user clicking button
$('#searchbutton').click(function(){
     makeAjaxRequest();
});

//capture user pressing 'return'
$('form').submit(function(e){
    e.preventDefault();
    makeAjaxRequest();
});      

</script>

Naturally here I'm just using alerts for debugging.

Here's my PHP from the external script:

<?php
require('connection.php');

if(isset($_GET['search'])) {
    $search = $_GET['search'];
    echo $search;
    $stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE '%' ? '%'");
    $stmt -> execute(array($search));
    $num = $stmt->rowCount();
}
if ($num == 0){
    echo "<p>Sorry, no products matched your search</p>";
} else {
    if ($num == 1){
            echo '<p>We have found 1 product that matches your search terms. Please click the link to visit the product page.</p>';
        } else {
            echo '<p>We have found '.$num.' products that match your search terms. Please click a link to visit the product page.</p>';
        }
        echo '<ul class="products>';
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            echo '<li><h3><a href="product.php?id='.$row['product_id'].'">'.$row['product_name'].'</a></h3></li>';
        }
    echo '</ul>';
}

?>

The problem is, it fails, and it fails silently. I get no alert either way and no errors in the console, or Firebug. The PHP works fine in isolation, but when I use the search page - bupkus.

EDIT: I've moved the event handlers outside the makeAjaxRequest function but still no dice.

Upvotes: 3

Views: 9962

Answers (4)

jay.jivani
jay.jivani

Reputation: 1574

<script type="text/javascript">
$(document).ready(function(){
    var sval = $('#searchbox').val();
    var datastring = "search="+sval;

    $('#searchbutton').click(function(){
        $.ajax({
            url: 'search_execute.php',
            type: 'get',
            datatype: 'html',
            data: datastring,
            success: function(response) {
                alert("Success!");
            }, error : function() {
                alert("Something went wrong!");
           }
        });
    });
});
</script>

In php file change sql

$stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE '%".$search."%' ");

Upvotes: 0

geekido
geekido

Reputation: 171

You should use your query like

$q = '%' .$search. '%'
$stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE ?");
$stmt->execute(array($q));

Upvotes: 0

Miloš Rašić
Miloš Rašić

Reputation: 2279

Your brackets are kind of weird in the JavaScript code. The way it looks right now, event bindings are inside the makeAjaxRequest() function, so the handlers never get bound to the events until the function is first called. Of course, the function is only ever called from the event handlers, so it's never called.

To fix this, just copy-paste the bindings outside the function.

You can also change the first binding to

$('#searchbutton').click(makeAjaxRequest);

for a small performance gain.

Upvotes: 0

Abhik Chakraborty
Abhik Chakraborty

Reputation: 44844

Your Javascript code is not correct, the event functions you have added inside the function makeAjaxRequest and hence its never called. It should be as

<script type="text/javascript">
$(document).ready(function(){
    function makeAjaxRequest() {
        $.ajax({
            url: 'search_execute.php',
            type: 'get',
            datatype: 'html',
            data: {search: $('#searchbox').val()},
            success: function(response) {
                    alert("Success!");
            }, 
            error : function() {
                    alert("Something went wrong!");
            }
        });
    }

    $('#searchbutton').click(function(){
            makeAjaxRequest();
    });

    $('form').submit(function(e){
            e.preventDefault();
            makeAjaxRequest();
    });
});

Upvotes: 3

Related Questions