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

<script> 
$(document).ready(function() {
   $(".open-details-modal").click(function() {
     $("#name").text($(this).attr('data-id-product-name'));
     $("#vendor").text($(this).attr('data-vendor'));
     $("#detailsModal").modal("show");
  });
});
</script>

Answer 2

在您的代码中，不会打印通过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>

将php变量传递给bootstrap模式从按钮单击没有ajax

2 个答案: