CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Aravinth E
Aravinth E

Reputation: 491

How to refresh Bootstrap modal refresh before modal show

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>

Upvotes: 4

Views: 45905

Answers (3)

Dileep Veldi
Dileep Veldi

Reputation: 45

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

Upvotes: -1

Eliyaz KL
Eliyaz KL

Reputation: 684

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

Upvotes: 3

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

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

Upvotes: 1

Related Questions