yo1i4q
Last Updated: February 25, 2016
·
50.91K
· jensanity5000
0 gnyat95 jjx7g fvxaoctnnkjr ilhfv0bemtvn86ob mkrsakmjfzgmcvij f69yvyfm ew8hfc

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.

Say Thanks
Respond

5 Responses
Add your response

14451
Tim vector

nice and simple!

over 1 year ago ·
16351
201939e2d2d7f5e4c874fa0a5a7f9d2d

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
1281636

Can you update the code for Bootstrap 2.X ?

over 1 year ago ·
18828
0 gnyat95 jjx7g fvxaoctnnkjr ilhfv0bemtvn86ob mkrsakmjfzgmcvij f69yvyfm ew8hfc

@raul1991 I think for Bootstrap 2 this should work:

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

over 1 year ago ·
19292
9vw15uhe normal

thanks you. it good way to solve problem.

over 1 year ago ·