6

Remote a Bootstrap Modal Every Anchor Click

Posted (Updated ) in Javascript

Twitter Bootstrap (3.1.1 at the time of writing) has a handy piece of functionality whereby if you trigger a modal with data attributes on an anchor element, the modal will load its contents from the anchors href attribute. Being able to AJAX load in this way is great, however the first load caches so every subsequent click of the anchor element will show the same modal contents. This can present a problem in some use cases.

Here’s an example of the default functionality:

Notice the dynamically generated date isn’t being updated each time you open the modal? Well if you need the contents to always be reloaded each open, there’s a simple jQuery fix.

1
2
3
$('#myModal').on('hide.bs.modal', function(e) {
	$(this).removeData('bs.modal');
});

And a working demo:

Enjoy!