Question

我有一个Bootstrap模式，通过ajax调用确认数据库中的动作，我想在ajax中返回成功后重新加载这个模态。

HTML：

<div class="modal fade" id="modal-4">
   <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h3 class="modal-title">Order Status</h3>
            </div>
            <div class="modal-body"> 
               <label class="ModalArrow">Order Number</label>
                    <select class="SelectStyle" style="width:95%;" name="OrderId" id="OrderId">
                        <option value="">Select Order Number</option>
                            <!--populate value using php-->
                            <?php
                                 $stmt ="SELECT distinct Order_ID FROM orders where Delivered=0";
                                 foreach ($conn->query($stmt) as $row) {
                            ?>
                            <option value="<?php echo $row['ID'];?>"><?php echo $row['Order_ID'];?></option>
                            <?php
                                }
                            ?>
                   </select>
           </div>
           <div class="modal-footer">
                 <button type="button" class="btn btn-success btn-md" style="margin:0;width: 100px;" onclick="ConfirmDelivery()">Delivered</button>
                 <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" style="font-weight: bold;">Cancel</button>
           </div>
    </div>
</div>

使用Javascript：

function ConfirmDelivery()
{
  select=document.getElementById("OrderId");
  OrderId=select.options[select.selectedIndex].text;

if (OrderId == "Select Order Number")
{
    sweetAlert("","Please Choose Order Number","error");
    return false;
}

$.ajax({
    type:"POST",
    url:"ConfirmDelivery.php",
    data:"OrderID="+ OrderId ,
    success: function(data)
    {
        if (data == "Success")
        {
            sweetAlert("Order Number:" + OrderId + " has been delivered!");
            $('#modal-4').on('hidden', function() {
                $(this).removeData('modal');
            });
        }
    }
})
}

问题是没有重新加载组合框

Answer 1

来自jQuery API

描述：删除以前存储的数据。

要更改div＃modal的内容，您可以使用.text()或.html()方法，具体取决于您的需求。

如何在javascript中重新加载Bootstrap 3模式

1 个答案: