带有mysql数据的Bootstrap Modal

时间:2015-06-01 09:03:39

标签: php jquery mysql twitter-bootstrap

我有一个带有产品名称和ID列表的html表,点击产品名称链接后我想打开一个模态并显示关于ID的项目。

我想将$ code传递给Model并检索数据。我该怎么办?

我的代码如下..

<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>

2 个答案:

答案 0 :(得分:1)

我意识到Logan的答案是行不通的,因为他的目标是课而不是Ids。对于模态的每个链接,data-target应该是唯一的ID。我创建了一个变量$ uid(唯一标识符),并将其初始化为一个(或者您可以使用主键)。每个模态的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 ?>

答案 1 :(得分:0)

您的链接的data-target将确定要打开的模式。因此,您必须通过将模式的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