Removing content cache from bootstrap modal

Question

I'm using a dynamically generated list of links to show a modal window with ajax loaded content. Bootstrap automatically caches the content and doesn't clear it on modal hide event.

I need to get new content every time I click the link, how can I workaround this? I checked and there are no methods or properties to set the caching to false.

Answer 1

You can use something like this:

        <a href="/my/url" class="modal-toggle">test</a>


        $('body').on('click', '.modal-toggle', function (event) {
            event.preventDefault();
            $('.modal-content').empty();
            $('#myModal')
                .removeData('bs.modal')
                .modal({remote: $(this).attr('href') });
        });

Answer 2

this worked for me..

$('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
      });