yo1i4q
Last Updated: July 05, 2018
·
95.57K
· jensanity5000

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.

5 Responses
Add your response

14451

nice and simple!

over 1 year ago ·
16351

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!

over 1 year ago ·
18814

Can you update the code for Bootstrap 2.X ?

over 1 year ago ·
18828

@raul1991 I think for Bootstrap 2 this should work:

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

over 1 year ago ·
19292

thanks you. it good way to solve problem.

over 1 year ago ·