javascript - How to refresh Bootstrap modal refresh before modal show - Stack Overflow

admin管理员组

文章数量:1277885

I was tried to my project many modal but the one modal load the data. After close the modal then I load another modal. But can't load that modal data. That was loaded old modal data. How to solve this problem?

this is my first load Jquery. this data worked properly.

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>';
}

This is my another modal when I clicked first modal data show then closed that modal. Then I click another modal I was shown first modal result:

<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>

I was tried to my project many modal but the one modal load the data. After close the modal then I load another modal. But can't load that modal data. That was loaded old modal data. How to solve this problem?

this is my first load Jquery. this data worked properly.

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>';
}

This is my another modal when I clicked first modal data show then closed that modal. Then I click another modal I was shown first modal result:

<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>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Dec 19, 2016 at 11:43 Alexandre Neukirchen 2,78377 gold badges2828 silver badges3636 bronze badges asked Dec 19, 2016 at 11:40 Aravinth EAravinth E 49122 gold badges99 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

you can use something like this to clear old data. Below your code $('#orumodal').modal('show'); Use any of the following:

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

or

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

to remove all rows except 1st row:

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

There is an event which is triggered before modal is shows so you can put your logic of getting data or whatever you want in it.

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

Here is jsfiddle

Finally this worked for me after adding .show() after reload() . Thanks for all your tips. Note : I have added below snippet with in document ready function

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

本文标签： javascriptHow to refresh Bootstrap modal refresh before modal showStack Overflow