dtwzwmv87399
dtwzwmv87399
2019-01-28 19:43
浏览 28
已采纳

每个行上的Bootstrap模态

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dtcu5885
    dtcu5885 2019-01-28 19:59
    已采纳

    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.

    点赞 评论
  • dsf5632
    dsf5632 2019-01-28 20:35

    I took the liberty and added closing brace for your while loop just after the last </tr> (before the </tbody> in your first piece of code. I also copied the second piece of your code (you named it "Modal Code") right before that closing brace – since you give different id’s per modal, I assume that each row in your table has own modal. And everything works fine on my WAMP server. Make sure that:

    1. You have included jquery.js, bootstrap.css and bootstrap.js
    2. You have enabled javascript in your browser.
    点赞 评论

相关推荐