PHP & Mysql : Display Certain Data based on id

Question

Basically I have this code where I want to extract some data from a database and display it on a pop-up window. The problem is when I click on the eye icon ( labelled More ) I want it to display the correspondent id of that table row but I can't seem to figure out how to do that. For more references I set up a temporary website to better see the problem : http://twgtest-org.stackstaging.com/bau50/bau50_extract.php

You can see that when I click on more the displayed ID is actually all the IDs from the database instead of it being only the ID of that row

<?php
//load database connection  
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
$query_string = "SELECT * FROM bau50";
$query = $pdo->prepare($query_string);
$query->execute();
?>
<body>
<div class="container">
    <ul class="text-align">
        <?php

        if (!$query->rowCount() == 0) {

            while ($show_all = $query->fetch()) {
                echo '<tr><th scope="row">';
                echo $show_all['id_Bau50'];
                echo '</th><td>';
                echo $show_all['name'];
                echo '</td><td>';
                echo $show_all['produkt'];
                echo '</td><td>';
                echo $show_all['preis']," €";
                echo '</th><td>';
                echo $show_all['Ergebniss'];
                echo '</td>
                            <td><p data-placement="top" data-toggle="tooltip" title="more"><button class="btn btn-primary btn-xs" data-title="more" data-toggle="modal" data-target="#more" ><span class="fa fa-eye"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-secondary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="fa fa-pencil"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="fa fa-trash"></span></button></p></td></tr>';

            }
            echo '</tbody></table>';
        }
        ?></ul>
</div>
<?php
$query_view = "SELECT * FROM bau50";
$query2= $pdo->prepare($query_view);
$query2->execute();
echo'<div class="modal fade" id="more" tabindex="-1" role="dialog" aria-labelledby="more" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="fa fa-remove" aria-hidden="true"></span></button>
                            <h4 class="modal-title custom_align" id="Heading">More</h4>
                        </div>
                        <div class="modal-body">
                            <div>';
while ($show= $query2->fetch()) {
    $id= $show ['id_Bau50'];
    echo $id;
}
echo '</div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-secondary btn-lg" style="width: 100%;" data-toggle="modal" data-target="#edit"><span class="fa fa-pencil"></span> Update</button>
            </div>
            </div>
            <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
            </div>


            </div>';
?>

possible duplicate of [Passing data to a bootstrap modal](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — Sean, Oct 13 '17 at 21:13
You can use many modals and show them by id, or do an ajax request, or write the content in an attribute of the button and populate the modal via Javascript — Tobia, Oct 13 '17 at 21:15
@Tobia could you please elaborate more i didn't quite understand and thank you — Cesarior, Oct 13 '17 at 21:23

score -1 · Accepted Answer · answered Oct 14 '17 at 05:28

This is the very simply solution: add a new modal for each row identified by its id for example for id "4" you will open the modal with id "modal4" and so on:

<?php
//load database connection  
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
$query_string = "SELECT * FROM bau50";
$query = $pdo->prepare($query_string);
$query->execute();
?>
<body>
<div class="container">
    <ul class="text-align">
        <?php

        if (!$query->rowCount() == 0) {

            while ($show_all = $query->fetch()) {
                echo '<tr><th scope="row">';
                echo $show_all['id_Bau50'];
                echo '</th><td>';
                echo $show_all['name'];
                echo '</td><td>';
                echo $show_all['produkt'];
                echo '</td><td>';
                echo $show_all['preis']," €";
                echo '</th><td>';
                echo $show_all['Ergebniss'];
                echo '</td>
                            <td><p data-placement="top" data-toggle="tooltip" title="more"><button class="btn btn-primary btn-xs" data-title="more" data-toggle="modal" data-target="#more'.$show_all['id_Bau50'].'" ><span class="fa fa-eye"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-secondary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="fa fa-pencil"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="fa fa-trash"></span></button></p></td></tr>';

            }
            echo '</tbody></table>';
        }
        ?></ul>
</div>
<?php
$query_view = "SELECT * FROM bau50";
$query2= $pdo->prepare($query_view);
$query2->execute();
while ($show= $query2->fetch()) {
    $id= $show ['id_Bau50'];
    echo'<div class="modal fade" id="more'.$id.'" tabindex="-1" role="dialog" aria-labelledby="more" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="fa fa-remove" aria-hidden="true"></span></button>
                            <h4 class="modal-title custom_align" id="Heading">More</h4>
                        </div>
                        <div class="modal-body">
                            <div>';
    echo $id;
    echo '</div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-secondary btn-lg" style="width: 100%;" data-toggle="modal" data-target="#edit"><span class="fa fa-pencil"></span> Update</button>
            </div>
            </div>
            <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
            </div>


            </div>';
}

?>

This is ok for not so many rows or if you don't want to write some javascript.

A nicer solution would be to use one single modal with all content inside and show/hide the selected one, for this you need to use some js code and don't use the standard bootstrap attribute-driven methods. In this example I'm using jquery and js code (se at the bottom).

<?php
//load database connection  
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
$query_string = "SELECT * FROM bau50";
$query = $pdo->prepare($query_string);
$query->execute();
?>
<body>
<div class="container">
    <ul class="text-align">
        <?php

        if (!$query->rowCount() == 0) {

            while ($show_all = $query->fetch()) {
                echo '<tr><th scope="row">';
                echo $show_all['id_Bau50'];
                echo '</th><td>';
                echo $show_all['name'];
                echo '</td><td>';
                echo $show_all['produkt'];
                echo '</td><td>';
                echo $show_all['preis']," €";
                echo '</th><td>';
                echo $show_all['Ergebniss'];
                echo '</td>
                            <td><p data-placement="top" data-toggle="tooltip" title="more"><button class="btn btn-primary btn-xs" data-moreid="'.$show_all['id_Bau50'].'" ><span class="fa fa-eye"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-secondary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="fa fa-pencil"></span></button></p></td>
                            <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="fa fa-trash"></span></button></p></td></tr>';

            }
            echo '</tbody></table>';
        }
        ?></ul>
</div>
<div class="modal fade" id="more" tabindex="-1" role="dialog" aria-labelledby="more" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="fa fa-remove" aria-hidden="true"></span></button>
                        <h4 class="modal-title custom_align" id="Heading">More</h4>
                    </div>
                    <div class="modal-body">
<?php
$query_view = "SELECT * FROM bau50";
$query2= $pdo->prepare($query_view);
$query2->execute();
while ($show= $query2->fetch()) {
    $id= $show ['id_Bau50'];
    echo '<div id="more'.$id.'">'.$id.'</div>';
}

?>
                    </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-secondary btn-lg" style="width: 100%;" data-toggle="modal" data-target="#edit"><span class="fa fa-pencil"></span> Update</button>
            </div>
       </div>
    <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- YOU NEED JQUERY FOR THIS: -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("button[data-moreid]").click(function(){
            $("#more .modal-body > div").hide(); //hide all more div
            var id=$(this).attr("data-moreid"); //get id from pushed button
            $("#more .modal-body #more"+id).show(); //show only pushed id
            $("#more").modal("show"); //show modal
        });
    });
</script>

Thank you the first one worked like a charm i'm now looking to how to use the second two questions though : - you said the first method isn't good for too many rows do you mean i have to use the second ? - the second method is it possible to tweak in order to show all other entries in the database and maybe to edit them ? — Cesarior, Oct 14 '17 at 11:15
Yes, I think you can. I did not very well understand what do you mean for "all other entries", maybe many textarea to edit? The import thing is to use their id somewhere, ex. in the name of textarea, so you can track the information and get them server side where you can update your db. — Tobia, Oct 14 '17 at 11:25

PHP & Mysql : Display Certain Data based on id

1 Answers1