如何在 Bootstrap 模态框显示之前刷新模态框？

Question

我尝试使用多个模态框来展示我的项目，但只有一个模态框可以成功加载数据。当关闭该模态框后，我尝试加载另一个模态框，但无法加载该模态框的数据。它仍然会显示之前加载的旧模态框数据。如何解决这个问题？

这是我第一次使用Jquery来加载数据，它正常工作。

function Viewfull(id) {
    $.post('php/owner_list_view_modal.php',{id:id}, function (data) {
        var html = table(data);
         $('.modal-body').html(html);
         $('#orumodal').modal('show');
    });
}

function table(val) {
    var obj = $.parseJSON(val);

        var html = '<style>tr:nth-child(odd){background-color: #f5f5f5;} thead>tr{background-color: #ec971f; color: white;}</style>';
            html += '<table class="table table-bordered has-warning">';
                html += '<tbody>';
                    html += '<tr><td>Name</td><td>'+ obj.name +'</td></tr>';
                    html += '<tr><td>Email</td><td>'+ obj.emailid +'</td></tr>';
                    html += '<tr><td>Mobile</td><td>'+ obj.mobile +'</td></tr>';
                    html += '<tr><td>Address</td><td>'+ obj.address +'</td></tr>';
                    html += '<tr><td>Place</td><td>'+ obj.place +'</td></tr>';
                    html += '<tr><td>City</td><td>'+ obj.city +'</td></tr>';
                    html += '<tr><td>State</td><td>'+ obj.state +'</td></tr>';
                    html += '<tr><td>Pin</td><td>'+ obj.pin +'</td></tr>';
                    html += '<tr><td>Status</td><td>'+ obj.status +'</td></tr>';
                html += '</tbody>';
      return html += '</table>';
}

当我点击第一个模态框时，显示数据并关闭该模态框后，我再次点击另一个模态框时，却显示第一个模态框的结果：

<div id="uploadimg" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body" id="uploadmsg">
               <div class="container">
                   <div class="row well">
                       <div class="col-md-offset-4 col-md-6">
                           <form method="post" action="profile_image_save.php" enctype="multipart/form-data">
                               <div class="form-group">
                                   <label>Profile Image</label>
                                   <input type="file" id="profileimg" name="profileimg">
                               </div>
                               <div class="form-group">
                                   <button class="btn btn-success btn-lg pull-right">Change</button>
                               </div>
                           </form>
                       </div>
                   </div>
               </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

- Aravinth E

Answer 1

您可以使用类似以下的方法来清除旧数据。在您的代码下面添加 $('#orumodal').modal('show'); 并使用以下任一方法：

$("#myModal").val(null).trigger("change");

或者

$('#myModal').removeData();

删除除第一行以外的所有行：

$("#myModal").find("tr:not(:nth-child(1))").remove();

- Eliyaz KL

Answer 2

在弹出模态框之前，有一个名为event的事件被触发，因此您可以在其中放置获取数据或其他任何逻辑。

$('#YourModalID').on('show.bs.modal', function (e) {
  //Your code to get data or whatever you want
});

这里是jsfiddle

- Mairaj Ahmad

---

你可以获取数据并将其分配给上面代码中的“modal body”。 - Mairaj Ahmad

遗憾的是，这不会刷新模态框。如果您必须在模态框内设置级联下拉菜单，则绝对需要刷新模态框。 - MC9000

Answer 3

最终，在reload()后添加.show()，这对我起作用了。感谢您提供的所有提示。 注意：我已在document ready函数中添加了下面的代码片段

$('#myModal').on('hidden.bs.modal', function (e) {           
            location.reload();
            $('#myModal').show();
        })

- Dileep Veldi

---

不刷新模态框，只刷新页面，状态会丢失。 - MC9000