AJAX modals with Bootstrap 3

Bootstrap 3 provides support for loading content into a modal via ajax. Like so —

<button href="remotePage.php" data-toggle="modal" data-target="#myModal">Fetch</button>

However, one annoyance is that once it loads a page you can no longer request a different page – the request to /remotePage.php won’t be sent again. This is a problem if you have various buttons that request different information.

You can “reset” it after a modal is closed by adding this code to your page (in script tags) —

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

One thought on “AJAX modals with Bootstrap 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s