Display content from the database when a div with an ID is clicked (AJAX)

Question

I have a list of divs with unique IDs (they are inserted from my database). When I click on one of them I want to display content from my database in another div. For example, I have a div with class pizza . The query should look like this: SELECT * FROM product WHERE name = 'pizza' . So depending on what div you click you get different content. The code below doesn't work and is incomplete. I was trying to do some research myself, but I couldn't find anything useful.

//head
<script>
$(function () {
        $('.product').on('click', function (e) {
            e.preventDefault();

            $.ajax({
                type: "post",
                url: 'php/recipe-container.php',
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function(response) {
                    $(".display_recipe").html(response);
                },
                error: function () {
                }
            });

        });
});
</script>

//HTML
<div class="product" id="pizza">pizza</div>
<div class="product" id="lasagna">lasagna</div>
<div class="product" id="sushi">sushi</div>

<div class="display_recipe"></div>

// PHP (recipe-container.php)
<?php

function display_recipe(){
        
    $con = mysqli_connect("localhost", "root", "", "cookbook");
    $product = "'pizza'"; //just a placeholder
    $sql = "SELECT * FROM product WHERE name = $product";
    $res = mysqli_query($con,$sql);

    while($row = mysqli_fetch_assoc($res)) {
        $name = $row['name'];
        $description = $row['description'];
        $date = $row['date'];
            
        echo $name;
        echo "<br>";
        echo $description;
        echo "<br>";
        echo $date;
        echo "<br>";
    }
    mysqli_close($con);
}

display_recipe();
?>

Right now when I click the button nothing happens, even "pizza" placeholder doesn't work. Is there a simple way to do it?

Answer 1

JS file (AJAX code) You can get the id attribute on click of the div with the class 'product' as coded below:

jQuery(function () {
    jQuery('.product').on('click', function (e) {
      var product = jQuery(this).attr('id');

             $.ajax({
                type: "post",
                url: 'php/recipe-container.php',
                data: {data:product},
                processData: false,
                contentType: false,
                success: function(response) {
                    $(".display_recipe").html(response);
                }
            });
    });
});

PHP file: get the posted data in this file use it in a query to fetch the result and return the result to the AJAX success handler as a response.

To fetch the data posted from the ajax in this php file you can use $_POST['data'] as stated below:

$product = $_POST['data'];

Use that variable in your sql query to fetch the result and then change the structure of your response as stated below:

    //saving the html response in a variable named "response"
    $response = $name.'<br>';
    $response .= $description.'<br>';
    $response .= $date.'<br>';
    //echo response will send the response variable back to the AJAX success handler.
    echo $response;