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.

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.

• javascript
• php
• jquery
• mysql
• ajax

Share Improve this question Follow edited Dec 22, 2014 at 13:11 user3181236 asked Dec 22, 2014 at 12:57 user3181236user3181236 35722 gold badges44 silver badges1111 bronze badges 4

• event.preventDefault(); should be e.preventDefault(); – Think Different Commented Dec 22, 2014 at 13:00
• Noted and changed, thanks. – user3181236 Commented Dec 22, 2014 at 13:01
• Deviating from your question, and you probably have reasons not to, but if it's only going to be ~50 products then do you really need to query the db on every search? If the quantity of products is that small, they're unlikely to change much? So maybe storing them in your JS instead and performing your search client side rather than sending ajax requests & hitting the db on every search would be beneficial for you? Just a thought. – SubjectCurio Commented Dec 22, 2014 at 13:42
• @MLeFevre they do change occasionally, and I'd like it to be future-proof in any case. – user3181236 Commented Dec 23, 2014 at 9:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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();
    });
});          

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.

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));

<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."%' ");