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

Question

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)

You could give unique id to the span which would also be the id of the corresponding recipe in the database. Then you bind that span's onclick event to an AJAX request via jQuery. The AJAX request posts the span's ID to a PHP page, which pulls the recipe details from the DB (based on span id passed) and returns it to the calling page where you can populate the DIV. I recommend looking at a basic PHP/jQuery/AJAX tutorial. — Maximus2012
– Maximus2012, Commented Nov 11, 2016 at 22:16
Also, I am not sure if you need this: <?php require("$DOCUMENT_ROOT/$rec_source"); ?> — Maximus2012
– Maximus2012, Commented Nov 11, 2016 at 22:18
I jumped into a PHP/jQuery/AJAX tutorial today. I'm building a canvas to work with as I learn, and suppose I digressed a little bit looking to solve that one problem. I learn fast this way, though, biting off a little more than I can chew and then catching up. The php require was there to display a welcome page. I didn't mean to include it in the example code. Thanks for your answer, Maximus! Looking at these options, now. — Caspar Antrim
– Caspar Antrim, Commented Nov 11, 2016 at 22:37

br3t · Accepted Answer · 2016-11-11 22:26:43Z

2

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

edited Nov 11, 2016 at 22:26

answered Nov 11, 2016 at 22:15

br3t

1,6582 gold badges22 silver badges29 bronze badges

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

4 Comments

Maximus2012 Over a year ago

I think you also need to specify a method type (post/get) for the AJAX request.

Caspar Antrim Over a year ago

Oh, I like this a lot already! Let me implement this and build the get_recipe function so I can catch up with the process. I'm still very new to a lot it - but the logic is clear. A little frustrating that I didn't think to pass the recipe id key as an html id for each item. lol Thank you so much, Br3t. Will mark your answer as accepted.

br3t Over a year ago

Maximus2012, thank you. It "GET" by default, by Caspar couldn't know about it.

Caspar Antrim Over a year ago

As a newbie, I like to stick with POST simply for security reasons and because it was the first I learned. I'll be expanding my knowledge there, soon.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related