如何通过调用产品 ID 获取模态中的详细信息来制作模态 bootstrap 弹出窗口？

Question

我试图通过单击详细信息按钮来制作弹出模式 bootstrap。在模式中，当我单击详细信息按钮时，我可以使用 pdo 调用产品详细信息，我可以获得产品编号（id）。不幸的是，productnum（id）总是调用最后一行数据productnum（id）...我如何正确调用产品productnum（id）以插入模态bootstrap javascript？

 <?php
      // Read
         $per_page = 10;
      if (isset($_GET["page"]))
        $page = $_GET["page"];
      else
        $page = 1;
      $start_from = ($page-1) * $per_page;
      try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("select * from tbl_products_a170804_pt2 LIMIT $start_from, $per_page");
        $stmt->execute();
        $result = $stmt->fetchAll();
      }
      catch(PDOException $e){
            echo "Error: " . $e->getMessage();
      }
      foreach($result as $readrow) {
      ?>   
      <tr>
        <td><?php echo $readrow['fld_product_num']; ?></td>
        <td><?php echo $readrow['fld_product_name']; ?></td>
        <td><?php echo $readrow['fld_product_price']; ?></td>
        <td><?php echo $readrow['fld_product_brand']; ?></td>
        <td><?php echo $readrow['fld_product_quantity']; ?></td>
        <td>
          <button class="btn btn-warning btn-xs openPopup" role="button" id="details" value="<?php echo $editrow['fld_product_num']; ?>" >Details</button>
           <?php if($pos==="Admin" || $pos==="Supervisor" ){ ?>
          <a href="products.php?edit=<?php echo $readrow['fld_product_num']; ?>" class="btn btn-success btn-xs" role="button"> Edit </a>
          <a href="products.php?delete=<?php echo $readrow['fld_product_num']; ?>" onclick="return confirm('Are you sure to delete?');" class="btn btn-danger btn-xs" role="button">Delete</a>
        </td>
      <?php } ?>
      </tr>
      <?php } ?>

这是我的模态 bootstrap 代码

 <div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Product Details</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">&times; Close</button>
            </div>
        </div>
    </div>
</div>

这是 javascript.. 当我点击它时，它总是给我最后一行 ID

 <script>
$(document).ready(function(){
    $(".btn").click(function(){
        $('.modal-body').load('products_details.php?pid=<?php echo $readrow['fld_product_num']; ?>',function(){
    $('#myModal').modal({show:true});
});
    });
});

**问题：**我如何正确调用确切的产品编号以放入模态 javascript

Answer 1

我认为您必须将产品的 ID 存储在某处（例如 data-attribute 在 .btn 元素中）并稍后在 jQuery

中使用它

<a href="products.php?edit=<?php echo $readrow['fld_product_num']; ?>" 
  data-id="<?php echo $readrow['fld_product_num']; ?>"
  class="btn btn-success btn-xs" role="button"> Edit </a>

$(document).ready(function(){
  $(".btn").click(function() {
    const id = $(this).data( "id" )
    $('.modal-body').load(`products_details.php?pid=${id}`,function() {
      $('#myModal').modal({show:true});
    });
  });
});

Answer 2

我已经解决了这个问题。只有我们数据-url

<button 
      data-href="products_details.php?pid=<?php echo $readrow['fld_product_num']; ?>"
       class="btn btn-warning btn-xs" role="button">Details</button>

这是我的jquery

 <script>
$(document).ready(function(){
    $(".btn").click(function(){
       var dataURL = $(this).attr( "data-href" )
        $('.modal-body').load(dataURL,function(){
    $('#myModal').modal({show:true});
});
    });
});

如何通过调用产品 ID 获取模态中的详细信息来制作模态 bootstrap 弹出窗口？

How to make a modal bootstrap popup by calling the product id to get details in the modal?

html

javascript

jquery

bootstrap-modal