Bootstrap 3: Replacing a modal when one is already open

Question

I have a set of buttons that each can open the modal. The first one opens fine, but if you don't close the modal the second one fails with 'Uncaught TypeError: undefined is not a function.

I have a bunch of links:

<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/forums-modal.html">Open Modal A</a>
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/facebook-modal.html">Open Modal B</a>

I tried: Twitter Bootstrap open modal over an already opened modal

Not a big help either. Hiding a previous modal when opening a new one.

Yes I have jquery loaded before bootstrap.

Answer 1

The fix for the first error 'Uncaught TypeError' was to upgrade from bootstrap 3.1.1 to 3.2.0. Once this is done, clicking on the second div, the modal closes rather than staying open with the new content.

To update the content, I went down the ajax path. These modals are themselves loaded by ajax (mobile-first and they aren't mobile). Therefore, in a similar vein to Reload Content in Modal Twitter Bootstrap I used the following code:

$('body').on('click', 'a[data-target=#modal-form]', function(ev) {
        console.log("clicked");
        ev.preventDefault();
        var target = $(this).attr('href');

        $('#modal-form').load(target, function() {
            $('#modal-form').modal("show");
        });
    });