使用ajax进行Boostrap模式更新

Question

我有一个页面，其中有一个生成按钮，其中包含数据ID。 当我点击按钮时，通过ajax将data-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');
});