Modal won't close on ajax success

Question

I'm loading in the content of a modal with ajax. I have a button that submits the modal form and is suppose to close the modal when it's done processing the ajax submit so it can update a table at the bottom of the page. It's not closing the modal after I update the table and call $('modal-container').modal('hide');

This modal contains a table that has pagination on it. In the 'loaded.bs.modal' event I turn all the links that have the modal-pagination-link class into an ajax link. The pagination library I'm using only allows the url and parameters of the link to be passed in which is why I do this link transformation after they're loaded. When you click on one of these links it updates the table. In order to prevent the modal itself from closing after you click the link I call $(this).removeData('bs.modal'); . What I've found is this $(this).removeData('bs.modal'); is what is preventing any of the $('#modal-container').modal('hide'); 's from working.

How do I prevent the modal from closing when a link is clicked on in the modal and still allow .modal('hide') to still work? What can I call instead of $(this).removeData('bs.modal') ?

$(function () {
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
    $('#modal-container').draggable();
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
    $('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
});

$('#modal-container').on('click', '.modal-pagination-link', function (e) {
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});

$('#modal-container').on('loaded.bs.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
    var pagcontainers = $(this).find('#modal-pagination');
    var hrefs = $(pagcontainers).find('a').addClass('modal-pagination-link')
                                            .attr('data-ajax', 'true')
                                            .attr('data-ajax-mode', 'replace')
                                            .attr('data-toggle', 'modal')
                                            .attr('data-target', '#modal-container')
                                            ;

});

$('#modal-container').on('submit', '#asset-modal-frm', function (e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
        var data = $(this).serializeArray();
        $.ajax({
            url: '/licenses/allocate',
            type: 'POST',
            data: data,

            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    $('#allocatedLicenses tr:last').after(
                    $("<tr>").append($("<td>").text(data[i].name))
                                    .append($("<td>").text(data[i].manufacturerItem.serialNumber)));
                }
                $('#modal-container').modal('hide');
            }
        })
    }
});
});

my html:

    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <input id="modal-update-target" type="hidden"/>
        <div class="modal-dialog">
            <div class="modal-content center-block" style="display: table;">
            </div>
        </div>
    </div>

Answer 1

You're using the wrong method to hide the element.

Change this:

$('#modal-container').modal('hide');

To this:

$('#modal-container').hide();

Or if you want to completely remove it from the page, change it to this:

$('#modal-container').remove();