How to refresh Bootstrap modal refresh before modal show

Question

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>

Answer 1

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();

Answer 2

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