Bootstrap 通过php变量引导模态从按钮点击 AJAX

mwngjboj  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(3)|浏览(163)

我试图通过传递我的php变量到一个引导模态点击。由于某种原因,数据不显示时,模态创建。

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

为什么数据没有被传递到模态?当我直接从循环打印到页面时,数据就在那里,所以我知道那里没有什么问题。

oaxa6hgo

oaxa6hgo1#

在你的代码中,你通过data-vendordata-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>
fcg9iug3

fcg9iug32#

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

628mspwn3#

HTM /PHP生成

<a class="openModal" data-id="<?php echo htmlentities($result->requestitem_item); ?>" data-toggle="modal" href="#myModal">

模态生成

<!--Modal starts Here-->

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"modalajax.php?id="+id,cache:false,success:function(result){
          $(".modal-content").html(result);
      }});
  });
</script>
    
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

<!--Modal ends Here-->

modalajax.php

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <h2 class="modal-title">Issuing SERIAL No# to Items (<?php echo $ID ?>) </h2>
</div>
<form method="post" class="form-horizontal" enctype="multipart/form-data">
<div class="modal-body">

    <!-- Zero Configuration Table -->
    <div class="panel panel-default">
      <div class="panel-heading">Listed  Users</div>
        <div class="panel-body">
            <div style="overflow-x:auto;">
                <table id="zctb" class="display table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                  <thead>
                    <tr>
                             <th>ITEM NAME</th>                
                             <th>ITEM SERIAL#</th>               
                             <th>ITEM DEPARTMENT</th>
                             <th>ITEM CATEGORY</th>
                             <th>ITEM BRAND</th> 
                            </tr>
                  </thead>
                  <tbody>

<?php 
$sql = "SELECT * from  itemTABLE where itemTABLE_item ='$ID' " ;
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{       ?>  
            <tr>
         <td style="display:none;" ><input class="itemID"  name="itemID" class="form-control" value="<?php echo htmlentities($result->itemTABLE_id);?>" /></td>
         <td><?php echo htmlentities($result->itemTABLE_item);?></td>
         <td><input style="font-size:20px" type="text" name="itemserialno[]" class="itemserialno" value="<?php echo htmlentities($result->SERIAL_NUMBER);?>" required></td>
         <td><?php echo htmlentities($result->itemTABLE_department);?></td>

         <td><?php echo htmlentities($result->itemTABLE_category);?></td>
         <td><input style="font-size:20px" type="text" name="itembrand[]" class="itembrand" value="<?php echo htmlentities($result->SERIAL_NUMBER);?>" required>
            </tr>
                    <?php $cnt=$cnt+1; }
                  } else{
                      echo'
                      <tr>
                        <td colspan = "4"><center>Record Not Found</center></td>
                      </tr>';
                    } ?>
                    
                  </tbody>
                </table>
             </div>
         </div>
   </div>

      <div class="modal-footer">
        <button style="font-size:25px" type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">Save</button>
        <button style="font-size:25px" type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">Cancel</button>
      </div>
</div>
</form>

相关问题