模式不会关闭 ajax 成功

Posted 2023-03-05

【中文标题】模式不会关闭 ajax 成功

【英文标题】：Modal won't close on ajax success

【发布时间】：2015-09-08 06:31:56

【问题描述】：

我正在使用 ajax 加载模式的内容。我有一个提交模式表单的按钮，并且假设在处理完 ajax 提交后关闭模式，以便它可以更新页面底部的表格。在我更新表格并调用$('modal-container').modal('hide');后，它没有关闭模式

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

如何防止在模式中单击链接时关闭模式并仍然允许.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');
            
        )
    
);
);

我的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>

【问题讨论】：

不确定，但您在loaded.bs.modal 中所做的$(this).removeData('bs.modal'); 可能会删除模型的内置功能。所以.modal 方法在那之后什么都不做..

$(this).removeData('bs.modal'); 有什么特别的原因吗？

@PeterKA 我在我的问题中解释了$(this).removeData('bs.modal'); 的原因。

看看这是否有帮助：***.com/questions/16152073/…

【参考方案1】：

您使用了错误的方法来隐藏元素。

改变这个：

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

到这里：

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

或者，如果您想将其从页面中完全删除，请将其更改为：

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

【讨论】：

成功了！为什么我看到的每个示例都使用.modal('hide')？

你能解释一下为什么漂亮的淡入淡出效果只有在你点击模态框外才有效吗？ .hide(); 立即关闭它，没有过渡，这并不完全理想。我仍然会给你标记的答案。

我相信您之前看到的示例是具有自己特定功能的 Bootstrap 模态：getbootstrap.com/javascript

jQuery hide 允许您指定创建您正在寻找的淡入淡出效果的持续时间：api.jquery.com/hide