Modal不会关闭ajax成功

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');

我正在使用ajax加载模态的内容。我有一个提交模态形式的按钮,并且假设在完成处理ajax提交时关闭模态,以便它可以更新页面底部的表格。更新表并调用$('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.

此模式包含一个在其上具有分页的表。在'loaded.bs.modal'事件中,我将具有modal-pagination-link类的所有链接转换为ajax链接。我正在使用的分页库只允许传递链接的url和参数,这就是我在加载后进行链接转换的原因。当您单击其中一个链接时,它会更新该表。为了防止模式本身在你单击链接后关闭我调用$(this).removeData('bs.modal');.我发现的是这个$(this).removeData('bs.modal');什么阻止任何$('#modal-container')。modal('hide');来自工作。

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')?

当在模态中单击链接并仍然允许.modal('hide')仍然有效时,如何阻止模态关闭?我可以调用什么而不是$(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>

1 个解决方案

#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();

#1