CODEWITHSUNDEEP
phptwitter-bootstrapwhile-loopechobootstrap-modal
Jamari Johnson
Jamari Johnson

Reputation: 25

PHP code does not iterate to the next data variable in while loop (using bootstrap)

I am trying to get a result from my PHP code that will iterate through an SQL database, make a table (in Bootstrap) of names, titles and phone numbers, and have each name, once clicked, trigger a modal that will display a name, photo, and small bio. These will all be echoed through variables taken through the variable assignment loop.

The current problem that I have is that while the modal itself is functional on click, the modal title only shows the first name shown in the database regardless of what name I click in the table. I have tried to move the echo ("$last_name, $first_name") assignment around to no avail. How can I get the while loop to account for the rest of the names in the table and iterate to that data in the SQL database?

     //Displays results from query (if valid)
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $id           = $row["ID"];
    $last_name    = $row["last_name"];
    $first_name   = $row["first_name"];
    $job_title    = $row["job_title"];
    $phone_number = $row["phone_number"];
    $snetid       = $row["netid"];
?>
                                <tr>
                                    <td>
    <a data-toggle="modal" href="#picbio">
                                        <?php

     alphabeticAnchorId($last, $last_name);
     echo "$last_name, $first_name";                                        

?>
                                        </a>
<div id="picbio" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>

        <h4 class="modal-title"><?php echo "$first_name, $last_name"; ?></h4>
      </div>

      <div class="modal-body"><img src="empty_profile.gif" width="200px" height="200px" alt="Pic goes here"><br>
        <a href="mail goes here" target="_blank"><i class="fa fa-envelope"></i>&nbsp; Mail</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in scelerisque elit, vel dictum justo. Nunc sit amet quam et justo tincidunt varius. Morbi tellus leo, hendrerit sit amet pellentesque quis, placerat eu libero. Quisque commodo, justo eget eleifend ultrices, tellus sem dignissim ipsum, sit amet suscipit massa massa eget eros. Donec tristique libero mi, id sagittis risus fermentum vel. Curabitur scelerisque lorem ut massa feugiat dignissim. Sed nec tortor vel eros accumsan egestas sed quis nulla. Curabitur a eros nec velit volutpat lobortis. Quisque a consequat elit. Aliquam gravida eros velit, in varius tellus dictum sit amet. Fusce id ex elit. </p>
      </div>

Upvotes: 2

Views: 126

Answers (1)

Cave Johnson
Cave Johnson

Reputation: 6778

As David stated in the comments, you need to have a unique HTML ID for each modal so that the link will know which modal to open. Plus, multiple IDs of the same name is not valid in HTML. You can use the $id variable that you already have to make the HTML ID unique. So the opening tag for your modal would look like this:

<div id="picbio-<?php echo $id; ?>" class="modal fade" aria-hidden="true" style="display: none;">

And your link to open the modal would look like this:

<a data-toggle="modal" href="#picbio-<?php echo $id; ?>">

to match the new modal ID.

Upvotes: 2

Related Questions