AJAX search form: how to trigger PHP query?

Question

I am new to AJAX, and I stumbled upon a small problem. I have a custom search field for pages within my database:

PHP:

 if(isset($_GET['fdf_search'])){
     $term_search = $_GET['fdf_search'];
     $fdf_pages = $mysqli_con->select("SELECT * FROM `pages` WHERE `alias` LIKE '%".$term_search."%'");
}

AJAX:

$(document).ready(function() {
$("#fdf-search").keyup(function() {
    // Assign $_GET['fdf-search'] to variable "searchKey" in js
    var searchKey = $('#fdf-search').val();
    if (searchKey == "") {
        //nothing
    }else{
        console.log('ajax called');
        $.ajax({
            type: "GET",
            url: "/fluidify/fdf-admin/functions/fdf_system_search.php",
            data: {
                search:searchKey
            },
            success: function(html){
                window.history.replaceState(null, null, "?fdf_search=" + searchKey + "");
            }
        });
    }
});
});

HTML:

<form action="" method="get">
    <input id="fdf-search" class="fdf-search" type="text" placeholder="zoeken" name="fdf_search" value="">
    <input class="fdf-search" type="submit" value="Zoeken" name="fdf_submit_search">
</form>

When I type in any word, I want my AJAX to trigger the PHP query and find and return any result. Right now window.history.replaceState(null, null, "?fdf_search=" + searchKey + ""); is changing the GET in my URL, but for some reason it does nothing.

All help is appreciated :)

EDIT: select(); class

public function select($query,$report = NULL){
    $result_array = array();
    $result_empty = false;
    $result = $this -> query($query);
    if($result !== false){
        while($row = $result -> fetch_assoc()){
            $result_array[] = $row;
        }
        return($result -> num_rows === 0) ? false : $result_array;
    }else{
        if($report === true){
            echo "error in query:";
            print_r($result);
            print_r($result_array);
            print_r($query);
            echo "<br>";
        }
    }
}

"is changing the GET in my URL, but for some reason it does nothing" - Those are two mutually exclusive things. All that line of code does is modify the URL value. If it's successfully doing that, then it's working. Was there something else you wanted your code to do as well? — David
– David, Commented May 12, 2018 at 14:23
Well, i want to get new results from the PHP query. My GET variable is updating with the code I provided, but for some reason I don't get updated results from my PHP query. — Saypontigohe
– Saypontigohe, Commented May 12, 2018 at 14:28
it looks like your php code does not echo anything, plus your ajax's success function doesn't make use of the response (html), you need to echo something from php and use that inside your success function. — xanadev
– xanadev, Commented May 12, 2018 at 14:29
In your AJAX success function you're not doing anything with the html variable. That would contain any content returned by the server. — David
– David, Commented May 12, 2018 at 14:29
you should give POST in type: "GET", ajax call. because you are passing data as like in body — Gopalakrishnan
– Gopalakrishnan, Commented May 12, 2018 at 14:33

xanadev · Accepted Answer · 2018-05-12 15:22:53Z

1

To get results back you should output something from your php code like so :

 if(isset($_GET['fdf_search'])) {
     $term_search = $_GET['fdf_search'];
     $fdf_pages = $mysqli_con->select("SELECT * FROM `pages` WHERE `alias` LIKE '%".$term_search."%'");
     //output the result
     echo json_encode($fdf_pages);
 }

and your ajax call should look like this:

$.ajax({
    type: "GET",
    url: "/fluidify/fdf-admin/functions/fdf_system_search.php?fdf_search=" + searchKey
}).done(function(json){
    //parse the ajax response
    search_result = JSON.parse(json);

    //do something with search_result ...

 });

edited May 12, 2018 at 15:22

answered May 12, 2018 at 14:43

xanadev

8261 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

xanadev Over a year ago

your sql query was missing some quotes as well :)

Saypontigohe Over a year ago

I see, my bad! However, the real SQL was way longer, but I shortened it for readability :) With the new ajax call i get 500 errors in my PHP file. Not sure why yet...

xanadev Over a year ago

i'm sure $mysqli_con->select() is not a mysqli function, did you mean $mysqli_con->query();

Saypontigohe Over a year ago

select is a class. Inside the class i use query(); Everything but the ajax part is used in all my web projects, so that should not be the problem :)

xanadev Over a year ago

what does the php debug console tell you ?

|

Collectives™ on Stack Overflow

AJAX search form: how to trigger PHP query?

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related