javascript - 使用 ajax 进行 Bootstrap 模式更新

Question

我有一个页面，其中有一个生成按钮，其中包含数据ID。当我单击按钮时，通过 ajax 将数据 ID 发送到我的 php 代码，打开模式窗口并生成带有收到 ID 的内容。但问题是我需要先刷新页面才能在 $_POST 变量中获取一些值，并且在打开和关闭模式后，我需要再次刷新页面，以便我的变量更新并且不会打开相同的窗口。

$(document).ready(function(){
  // Otevre modal
  $('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
    $.ajax({
      type: 'POST',
      cache: false,
      data: {modalID : product_id},
      url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
      success: function(data) {
        $("#itemBox").modal('show');
        // treba nejaka hlaska, ze byl pridan do kosiku
      }
    });

    // kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
    //$('.product_id').val(productID);
  });
});

这是 JS 代码，

<?php
if(!isset($_SESSION)){
    session_start();
}


if(isset($_REQUEST['modalID'])){

    $_SESSION['modalBoxID'] = $_REQUEST['modalID'];
}
?>

这是我如何从ajax保存请求的ID。

这是我生成模态框的方法，问题是在不刷新页面的情况下，我打开的每个框都有相同的内容。

<?php 
if(!isset($_SESSION)){
session_start();
}


if(!isset($_SESSION['sessName'])){
$_SESSION['sessName'] = 'visitor';
}

if(!empty($_SESSION['modalBoxID'])){
$sql = "SELECT * FROM vehicle WHERE     vehicle.id='{$_SESSION['modalBoxID']}'";
$sqlquery = $db->query($sql);
$_SESSION['modalBoxID'] = NULL;
}
?>


<div class="container">

  <!-- Modal -->
  <div class="modal fade" id="itemBox" role="dialog">
    <div class="modal-dialog modal-lg">


      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body display-content">
          <div class="container-fluid">
            <?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>


            <div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">

              <div class="col-sm-6">
                <form action="add_cart.php" method="post">
                  <div class="form-group">
                    <label for="quantity">Quantity:</label>
                    <input type="text" class="form-control" id="quantity" name="quantity">
                  </div>
                </form>
              </div>
              <div class="col-sm-6">
                <br/>
                <button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
              </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-7" id="desc">
              <p><b>Model:</b> <?php echo $details['model'];?></p>
              <p><b>Engine:</b>  <?php echo $details['engine'];?></p>
              <h4>Description</h4>
              <p><?php echo $details['description'];?></p>
              <hr>
              <hr>
            </div>

          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endwhile; ?>

使用我拥有的解决方案这是否可能？我什至在第一页加载时没有获得任何内容，我需要刷新它，以便我的 ID 保存到变量，然后它将显示一些内容。

Answer 1

将以下内容添加到您的 JavaScript 中。它从模态体中删除以前的数据。在加载新内容之前，您可能会遇到一些延迟。

$(document.body).on('hidden.bs.modal', function () {
   $("#itemBox").removeData('bs.modal');
});