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

时间:2016-12-19 11:40:36

标签: javascript jquery twitter-bootstrap

我尝试过我的项目很多模态但是一个模态加载数据。关闭模态后,我加载另一个模态。但无法加载模态数据。这是加载旧的模态数据。如何解决这个问题?

这是我第一次加载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>

3 个答案:

答案 0 :(得分:3)

  

你可以使用这样的东西清除旧数据。在你的代码下面$('#orumodal')。modal('show');请使用以下任何一项:

abstract

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

删除第1行以外的所有行:

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

答案 1 :(得分:1)

在显示event之前有一个triggered modal,因此您可以将您的数据或任何内容添加到其中。

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

Here是jsfiddle

答案 2 :(得分:0)

最后,在reload()之后添加.show()后,这对我有用。感谢您的所有提示。 注意:我在文档就绪函数

中添加了以下代码段

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