Caspar Antrim Caspar Antrim - 22 days ago 5
MySQL Question

Clickable HTML list to query db and output to <div>

Bear with me; this is my first StackOverflow question. I'm having trouble writing a proper algorithm. Perhaps doing all this to "force" it means I'm over-complicating a simple concept, but it's also very likely I'm just unaware of the fix.

I'm building an experimental cookbook that reads from a database and displays in the browser. I created a list (note: NOT a

<ul>
or
<ol>
element) that is populated by
<span>
items generated by a PDO query to the database. These spans reference the name of each recipe in the database.

<p>
<?php

$recList = $pdo->query('SELECT name FROM Recipe');
$rowCount = $recList->rowCount();
echo 'There are ' . $rowCount . ' recipes currently in our database!';
echo '<br /><br />';
while ($row = $recList->fetch()) {
echo '<span class="recName"';
echo '>' . $row['name'] . "</span><br />";
}

?>
</p>


I then created a scrolling div element:

<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>


I would like the user to be able to click on the recipe names generated by php and the chosen recipe to display within the
<div>
. Choosing different recipes should not cause the page to reload.

I feel like the answer lies in an AJAX request to a php file listening for a variable containing the recipe to display, but that's where I'm stuck. Somehow I need to pass the php list items a unique identifier that is recognized by javascript, which in turn handles the onclick change in the div by passing that identifier BACK to php to query the database. While typing that out, I'm almost certain that I've over-complicated this entire process.

I thought of using a dropdown select menu and a GET request, but I'd like to retain the clickable names function if possible.

Answers that conclude my proposed method is too "dirty" and point me in a better direction are completely acceptable. I'm happy to provide any necessary information I left out. Thank you so much in advance.

Environment: Virtual LAMP (CentOS7, MariaDB)

Answer

Try something like this

<p>
    <?php

    $recList = $pdo->query('SELECT name FROM Recipe');
    $rowCount = $recList->rowCount();
    echo 'There are ' . $rowCount . ' recipes currently in our database!';
    echo '<br /><br />';
    while ($row = $recList->fetch()) {
        echo '<span class="recName" data-id="' . $row['id'] . '"';
        echo '>' . $row['name'] . "</span><br />";
    }

    ?>
</p>
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("body").on("click", "recName", function() {
            //* get id of required recipe
            var recId = $(this).attr("data-id"); 
            //* send ajax-request to back-end
            $.ajax({ 
                url: "/get-recipe.php",
                method: "GET",
                data: {
                    id: recId
                },
                success: function(respond) {
                    //* put recipe-data into container
                    $("#recWindow").html(respond); 
                }
            });
        });
    });
</script>

I hope, it shows you the main idea

Comments