jquery - bootstrap 3 dynamic modal - ajax content caching issue

Question

I need a dynamic bootstrap modal, depending on the id I sent to an exterior page in the same domain the result needs to come to me in a bootstrap modal. The system works when you first load the page but if I click on another link to open different modal I should see different result but it only shows the first result...which is basically caching the result.

Here is what I have done. I also tried sending timestamp etc but it is still the same.

<a href='modal_window.php?mpage_id=$mpage_id' mpage_id='$mpage_id' data-toggle='modal' data-target='#myModal'> open modal </a>

This is my modal on the same page

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
</div>
<!-- /.modal -->

So how can I load remote content without caching the result?

Answer 1

Use the following JavaScript to purge the cache every time the modal is displayed:

$('#myModal').on('shown.bs.modal', function () {
    $(this).removeData('bs.modal');
});

It's also worth noting that remote modals are being deprecated in Bootstrap v3.2.1 and will be removed entirely in Bootstrap v4.