Clear Bootstrap Modal content after close.
Ran across this problem myself when trying to use a remote modal for dynamic content. when selecting a different link the old content would always be displayed.
Very simple fix just add this quick jQuery snippet to your html/jade/or whatever file in a script tag outside the body tag, but inside head tag.
So for example in Jade:
doctype 5
html
head
script
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
body
...
...This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content.
Of course you need to include jQuery JS file, Bootstrap JS File, and Bootstrap CSS. Not shown here for simplicity.
This is for Bootstrap 3.
Related protips:
Written by Adam Jensen
Related protips
5 Responses
nice and simple!
Thanks. I was getting a lot of bubbling events that were causing the modal to close multiple times and build on itself. This (using 'body' instead of '#element' and .removeData instead of .data('modal', null) as SE suggested) fixed it!
Can you update the code for Bootstrap 2.X ?
@raul1991 I think for Bootstrap 2 this should work:
$('body').on('hidden', function () {
$(this).removeData('modal');
});
thanks you. it good way to solve problem.
Have a fresh tip? Share with Coderwall community!
