如何在关闭后重新打开jQuery模态对话框？

Question

如何在关闭后重新打开jQuery模态对话框？

4

我有一个Asp.Net MVC应用，其中一个视图显示一个带有编辑图标的列表。点击编辑图标会弹出一个模态对话框来更新记录。

我遇到的问题是在关闭对话框后重新打开对话框或者点击其他编辑图标时会出现问题。以下是我的jQuery代码来打开对话框：

var singltym;

$(function () {

    $('#addSingleTimeDialog').dialog({
            cache: false,
            autoOpen: false,
            width: 450,
            height: 450,
            closeOnEscape: true,
            resizable: true,
            modal: true});

    $('#singletymlink').on('click', function () {
            singltym = $(this);
            var dialogDiv = $('#addSingleTimeDialog');
            var viewUrl = singltym.attr('href');
            $.ajax({
                cache: false,
                url: viewUrl,
                dataType: 'html',
                success: function (data) {
                    dialogDiv.html(data);
                    dialogDiv.dialog('open');
                }
            });
            return false;
        });
});

- Shalin Jirawla

请在问题中发布您的完整代码（<div>），因为我会为您找到解决方案。 - Mirko Cianfarani

6个回答

3

可以通过在弹出对话框所在的父视图中包含以下脚本来解决上述问题：

<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>

同时，在子视图中插入以下脚本，该视图是模态对话框弹出窗口的用户界面：

<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>

通过这种方式编写脚本，可以避免 jQuery 脚本冲突，并且可以快速重新打开对话框。

- Shalin Jirawla

1

我发现这个旧问题，发现了一个更简单的解决方案，这里没有列出。

为关闭事件添加一个事件侦听器，并在对话框关闭时调用destroy。

close: function(event, ui) {$(this).dialog("destroy");}

- ThatOneCloud

1

您可以使用open方法：

$('#addSingleTimeDialog').dialog('open');

- Darin Dimitrov

我知道我可以做到，但我必须使用来自服务器端控制器操作的动态数据加载对话框，为此我需要使用url构建对话框，并将数据作为HTML传递给对话框UI。 - Shalin Jirawla

奇怪的是，我在其他视图中使用的同一脚本却能正常工作。我分析了一下，并发现它没有刷新对话框。我采取了以下措施强制刷新它。

$('#updateMstrTaskDialog').dialog({
cache: false,
autoOpen: false,
width: 300,
height: 230,
resizable: true,
modal: true,
close: function () {
location.reload();
}
});

它可以工作，但会产生不必要的后台响应。 - Shalin Jirawla

0

尝试在close函数中编写$( this ).dialog( "close" );方法。例如：

close: function(){ $( this ).dialog( "close" ); },

$( this ).dialog( "close" );并不会销毁对话框，而只是关闭它，并使其可以在下一次使用。

- JayKandari

0

我的问题通过替换

得到了解决。

$(this).dialog("close");

使用

$(this).dialog("destroy");

- Md. Shafiqur Rahman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mirko Cianfarani · Accepted Answer

    var singltym;

    $(function () {

        $('#addSingleTimeDialog').dialog({
                cache: false,
                autoOpen: false,
                width: 450,
                height: 450,
                closeOnEscape: true,
                resizable: true,
                modal: true});

        $('#singletymlink').on('click', function () {
                singltym = $(this);
                var dialogDiv = $('#addSingleTimeDialog');
                var viewUrl = singltym.attr('href');
                $.ajax({
                    cache: false,
                    url: viewUrl,
                    dataType: 'html',
                    success: function (data) {
                        dialogDiv.html(data);
                       dialogDiv.dialog('open');

//我的工作方式

                  $( this ).dialog( "close" );

                }
            });
        });
});

或者

$.ajax({
                    cache: false,
                    url: viewUrl,
                    dataType: 'html',
                    success: function (data) {
                        dialogDiv.html(data);
                       $("#dialogDiv").dialog("open");

                  $( this ).dialog( "close" );

                }

如果 $( this ).dialog( "close" ); 不起作用，是因为没有尝试这个特定的语句吗？

$('#addSingleTimeDialog').dialog("close");