javascript - 将 php 变量从按钮传递到 Bootstrap 模式，单击无 ajax

Question

我试图在单击时将我的 php 变量传递给 Bootstrap 模式。由于某种原因，当模式创建时数据没有显示。

<!-- Index.php -->
<?php while($product = mysqli_fetch_assoc($featured)) :?>

    <h2><?php echo $product['ProductName']; ?></h2>
    <h4><?php echo $product['ProductPrice']; ?></h4>
    <button type="button" class="open-details-modal btn btn-primary"
       data-vendor="<?php $product['Vendor'];?>"
       data-id-product-name="<?php $product['ProductName'];?>" 
       href="#detailsmodal" data-target="#detailsModal"
      >Product Details
  </button>


  </div>
<?php endwhile; ?>

<!--footer.php-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(".open-details-modal").click(function() {
$("#name").html($(this).data("product-name"));
$("#vendor").html($(this).data("vendor"));

$("#detailsModal").modal("show");

});
});

<!--detailsmodal.php-->
<!-- Details Light Box -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="Product Details" aria-hidden="true">
<div class="modal-dialog modal-lg">
  <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 text-center" id="name"></h4>
  </div>
  <div class="modal-body">
    <p><strong>Vendor</strong> <span id="vendor"></span></p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

  </div>
</div>

数据没有传递到模态是否有原因？当我直接从循环打印到页面时，数据就在那里，所以我知道那里没有任何问题。

Answer 1

在您的代码中，不会打印通过 data-vendor 和 data-id-product-name 传递的数据。如果您看到源代码，它们将为空。

尝试打印从 PHP 传递的这些值的数据。

请参阅下面我所做的修改

<button type="button" class="open-details-modal btn btn-primary" 
data-vendor="<?php echo $product['Vendor']; // <--- check this ?>" 
data-id-product-name="<?php echo $product['ProductName']; // <--- check this ?>" 
href="#detailsmodal" data-target="#detailsModal">Product Details</button>