关闭后如何在jquery中重新打开模态对话框?

时间:2013-05-30 09:08:50

标签: javascript jquery-ui jquery asp.net-mvc-4

我有一个Asp.Net MVC应用程序,在1 View中,我有一个列表,其中每个记录都显示了Edit图标。单击编辑图标将打开一个模式对话框弹出窗口以更新记录。

关闭对话框后,我在重新打开对话框或单击其他编辑图标时遇到问题。         以下是我打开对话框的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;
        });
});

6 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分: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脚本冲突。重新开放对话可以很快完成。

答案 2 :(得分:1)

您可以使用open方法:

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

答案 3 :(得分:0)

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

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

$( this ).dialog( "close" );不会破坏对话框,而只是关闭它并使其可供下次使用。

答案 4 :(得分:0)

遇到这个较旧的问题,发现了一个更简单的解决方案,未列在此处。

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

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

答案 5 :(得分:0)

我的问题通过替换

解决了
$(this).dialog("close");

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