Bootstrap模态框与MySQL数据

Question

我有一个 HTML 表格，其中列出了产品名称和 ID。当点击产品名称链接时，我希望打开一个模态框并显示与 ID 相关的项目。

我想要传递 $code 给模态框并检索数据。我该如何做？

我的代码如下:

<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 1</a>
<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 2</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <?
                $code_id = isset($_GET['code']) ? $_GET['code'] : false;
                $result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
                $result->bindValue(':code', $code_id, PDO::PARAM_STR);
                $result->execute();
                $row = $result->fetch(PDO::FETCH_ASSOC);
                $unit = $row['unit']; $name = $row['name']; $price = $row['price'];
                ?>
            <table class="table">
                <tr>
                    <th style="text-align: center;">#</th>
                    <th style="text-align: center;">Unit</th>
                    <th style="text-align: center;">Product Name</th>
                    <th style="text-align: center;">Price</th>
                </tr>
                <tr>
                    <td><? echo $i; ?></td>
                    <td><? echo $unit; ?></td>
                    <td><? echo $name; ?></td>
                    <td><? echo $price; ?></td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

- tmariaz

---

我不确定我理解问题是什么，你现在的代码不起作用吗？ - Epodax

你应该使用Ajax来完成这个。 - Daan

请问您能指导一下我吗？因为我不知道如何在模态框中使用 $_GET 数据。如果使用 Ajax，应该如何实现？ - tmariaz

你也可以参考这里：http://stackoverflow.com/questions/28059086/bootstrap-modal-only-shows-the-first-item - Logan Wayne

@LoganWayne 那个链接我不太明白... 有点混乱... - tmariaz

Answer 1

我意识到Logan的答案不可行，因为他针对的是类而不是ID。每个链接到模态框的"data-target"应该是一个唯一的ID。我创建了一个变量$uid（唯一标识符），并将其初始化为1（或者您可以使用主键）。每个模态框都将有一个ID为"myModal+$uid"，每个链接都将指向特定模态框的ID。

<?php 
     $code_id = isset($_GET['code']) ? $_GET['code'] : false;
     $result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
     $result->bindValue(':code', $code_id, PDO::PARAM_STR);
     $result->execute();

     //checks if there are results before sending it to the while loop
     if ($result->num_rows > 0) {
         $uid = 1;//alternatively you can use your primary key from the table
         while($row = $result->fetch_assoc()){
?>
<a href="#myModal" data-toggle="modal" data-target="#myModal<?php echo $uid; ?>" data-code="@<? echo $code; ?>">Product <?echo $uid?></a>


  <!-- start modal, realise the id of each modal -->
  <div class="modal fade" id="myModal<?php echo $uid; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal fade">
    <!--the rest of your code-->
  </div>

<?php 
      $uid = $uid +1;//increase uid        
      }// end while 

 }//end if statement ?>

- Coding Enthusiast

Answer 2

你的链接的 data-target 属性将决定打开哪个模态框。因此，你需要通过将模态框的 class 属性与链接的 data-target 属性相同来链接这个属性。

试试这个：

while(/* YOUR CONDITION FOR FETCHING DATA FROM YOUR DB */){
  ?>
    <a href="#myModal" data-toggle="modal" data-target=".myModal<?php echo $uniqueid; ?>" data-code="@<? echo $code; ?>">Product 1</a>
  <?php

  <!-- START OF MODAL -->
  <div class="modal fade myModal<?php echo $uniqueid; ?>" .....>
    <!-- REST OF MODAL CODE -->
  </div>

} /* END OF LOOP */

只需将$uniqueid替换为您的主键即可。

- Logan Wayne

---

这意味着如果我有100个产品，我将在该While循环内创建100个模态框。对吗？ - tmariaz

@tmariaz - 抱歉，我回复你太晚了。我更新了我的答案，你的模态框的class应该是modal fade myModal<?php $uniqueid; ?>而不是modal fade bs-example-modal-lg<?php $uniqueid; ?>。只需查看我的更新答案即可。 - Logan Wayne

我还卡在这里...有人可以帮忙吗？ - tmariaz