每个行上的Bootstrap模态

Question

Basically, the page is supposed to prompt the user (preferably with a modal) before confirming the action.I modified our web page so it would include modals on delete per individual row. The modal doesn't seem to open if I include id="modalname" on both the data-target button and on the modal id.

<table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Full Name</th>
                    <th>Company</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th>Contact No.</th>
                    <th>Birth Date</th>


                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
<?php

$con = mysqli_connect("localhost","root","","database");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
        $query=mysqli_query($con,"select * from client  order by lname")or die(mysqli_error());
        while($row=mysqli_fetch_array($query)){

?>
                      <tr>
                        <td><?php echo $row['lname'];?>,
                       <?php echo $row['fname'];?> <?php echo $row['mname'];?> </td>
                        <td><?php echo $row['company'];?></td>
                         <td><?php echo $row['address'];?></td>
                         <td><?php echo $row['email'];?></td>
                        <td><?php echo $row['contact'];?></td>
                        <td><?php echo $row['bday'];?></td>
                        <td>
                <button type="button" data-toggle="modal" data-target="#deletemodale<?php echo $row['id'];?>" >Open Modal</button>



                        </td>
                      </tr>


                    </tbody>

                  </table>

Here's a sample code for my table. It includes the echoed values from the database with a button on each row for the modal.

Modal Code:

      <div class="modal fade" id="deletemodale<?php echo $row['id'];?>" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

I tried this with tag and href earlier, the row id seems to be showing on the url if I hover on it but the modal won't open on both cases. The modal also seems to open properly if I remove the php tag on its id. I also only have this modal code for the rest of the rows because of its dynamic nature

Answer 1

From what i see you code is valid, but i dont see where your while loop is ending. If you dont have your modal code inside your while loop only one modal html code will be printed, so there will be a modal only for the last row['id'].Is that the case? Also your while loop should be ending before the tbody tag.