javascript - JQuery 错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”

Question

我突然从 jQuery 收到这个错误：

错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”

插件

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

jQuery代码

我在以下函数中收到这些消息：

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>

score 26 · Accepted Answer

在 asp.net MVC 中打开带有部分布局的对话框时，我遇到了类似的问题。我正在部分页面以及导致此错误出现的主页上加载 jquery 库。

score 22 · Accepted Answer

看起来您的按钮未正确声明（无论如何根据最新的 jQuery UI 文档）。

尝试以下操作：

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});

score 16 · Accepted Answer

试试这个 - 它对我有用：

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

希望对你有帮助

score 10 · Accepted Answer

我也遇到了同样的错误：在初始化之前无法调用对话框上的方法；试图调用方法“关闭”

我所做的是我触发了对话框标题中的关闭按钮事件，例如

这对我来说很好，可以关闭对话框

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

score 9 · Accepted Answer

您是否$(this).dialog("close")有机会从 Ajax“成功”回调中调用？如果是这样，请尝试将context: this选项之一添加到您的$.ajax()通话中，如下所示：

$("#dialog").dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $.ajax({
                url: '/path/to/request/url',
                context: this,
                success: function(data)
                {
                    /* Calls involving $(this) will now reference 
                       your "#dialog" element. */
                    $(this).dialog( "close" );
                }
            });
        }
    }
});

score 5 · Accepted Answer

似乎出于某种原因，jQuery UI 会尝试在定义时运行按钮中定义的所有代码。这很疯狂，但我遇到了同样的问题，一旦我做出这个改变，它就停止了。

if ($(this).dialog.isOpen === true) { 
    $(this).dialog("close");
}

score 3 · Accepted Answer

我在 1.10.2 中遇到了同样的错误。在我的例子中，我想让点击背景覆盖隐藏当前可见的对话框，不管它基于哪个元素。因此我有这个：

$('body').on("click", ".ui-widget-overlay", function () {
    $(".ui-dialog").dialog('destroy');
});

这曾经是有效的，所以我认为他们一定已经删除了 JQUI 中对在某个时候在弹出窗口本身上调用 .dialog() 的支持。

我的解决方法如下所示：

$('body').on("click", ".ui-widget-overlay", function () {
    $('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});

score 2 · Accepted Answer

在一个对话框抛出此错误之前，我曾经遇到过这个问题，而所有其他对话框都运行良好。答案是因为我在页面上有另一个元素与相同的id="dialogBox"else ware。我在搜索过程中发现了这个线程，所以希望这对其他人有帮助。

score 1 · Accepted Answer

我偶然发现了同样的问题，并想分享我的解决方案：

<script type="text/javascript">
    $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                         //here "this" is the ajax object                                       
                            $(this).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        //here, "this" is correctly the dialog object
                        $(this).dialog( "close" );
                    }
                });
</script>

因为“this”引用了一个非对话框对象，所以我得到了提到的错误。

解决方案：

<script type="text/javascript">
    var theDialog = $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                            $(theDialog).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        $(this).dialog( "close" );
                    }
                });
</script>

score 1 · Accepted Answer

所以你用这个：

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

如果在对话框中打开 MVC 部分视图，则可以在索引中创建隐藏按钮和 JQUERY 点击事件：

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

然后在局部视图 html 中调用按钮触发单击，例如：

$("#YouButton").trigger("click")

再见。

score 1 · Accepted Answer

当我的 ajax 替换页面上的内容并以两个元素结束时，这发生在我身上第二个从未初始化过。

$(".dialogClass").dialog("close"); //This line was expecting to find one element but found two where the second had not been initialised.

对于 ASP.NET MVC 上的任何人来说，发生这种情况是因为我的控制器操作正在返回一个完整视图，包括具有该元素的共享布局页面，因为 javascript 只替换了主要内容区域，所以它应该返回部分视图。

score 0 · Accepted Answer

我有一个类似的问题，我通过在对话框声明之外定义我的按钮数组来解决。

var buttonArray = {};
buttonArray["Ok"] = function() { $( this ).dialog( "close" );}

您的选择将变为：

modal: true,
autoOpen: false,
buttons: buttonArray

score 0 · Accepted Answer

一个小时后，我找到了最好的方法。我们应该将对话的结果保存在变量中，然后调用变量的关闭方法。

像这样：

var dd= $("#divDialog")
.dialog({
   height: 600,
   width: 600,
   modal: true,
   draggable: false,
   resizable: false
});

// . . .

dd.dialog('close');

score 0 · Accepted Answer

尝试使用对话框主体内的按钮关闭对话框时，我收到此错误消息。我尝试使用$('#myDialog').dialog('close');哪个不起作用。

我最终使用以下命令触发了标题上“x”按钮的点击操作：

$('.modal-header:first').find('button:first').click();

score 0 · Accepted Answer

Senguttuvan：您的解决方案是唯一对我有用的方法。

函数 btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

score 0 · Accepted Answer

我有同样的问题，我打开了几个对话框我的问题是应该删除哪些内容以防止表单数据保持相同的数据，然后创建对话框这些参数

var dialog = $("#dummy-1");

    dialog.html('<div style="position:absolute; top:15px; left:0px; right:0px; bottom:0px; text-align:center;"><img align="middle" src="cargando.gif"></div>');
    dialog.html(mensaje);
    dialog.dialog(
    {
        title:'Ventana de Confirmacion',
        width:400, 
        height:200, 
        modal:true,
        resizable: false,
        draggable:false,
        position: { my: "center center", at: "center center", of: window },
        buttons:
        [
            {
                text: "Eliminar",
                click: function() {
                    functionCall(dialog,var1,var2);
                }
            },
            {
                text: "Cerrar",
                click: function() {
                    dialog.dialog("close");
                }
            }
        ],
        close: function(event, ui)
        {
            dialog.dialog("close").dialog("destroy").remove();
        }
    });

对话框作为参数传递给函数以执行操作：

    function functionCall(dialogFormulario,var1,var2)
{
    //same action 
        dialogFormulario.dialog("close");

}

这里只需要使用 .dialog("close") 而不需要 .dialog("destroy") 因为对话框将调用其函数 close: 并且元素将不存在

score 0 · Accepted Answer

我知道这已经很老了，但是当我不得不通过有角度的路线导航并且对话框打开时，我遇到了同样的问题，它仍然是打开的。所以我有一个解决方法来调用路由控制器析构函数中的 close 方法。但如果对话框未打开，则会出现上述错误。所以答案是如果您在初始化之前关闭对话框，它将通过此错误。要检查对话框是否打开然后关闭它在这种情况下包装你的关闭状态。

if($('#mydialog').dialog('isOpen')) { //close dialog code}

score 0 · Accepted Answer

创建一个单独的 JavaScript 函数，可以调用该函数以使用特定的对象 ID 关闭对话框，并将该函数放置在$(document).ready()这样的外部：

function closeDialogWindow() { 
$('#dialogWindow').dialog('close');
}

注意：该函数必须在外部声明，$(document).ready()因此 jQuery 在 DOM 中创建之前不会尝试触发对话框上的关闭事件。

score 0 · Accepted Answer

您可能想在对话框之外声明按钮内容，这对我有用。

var closeFunction = function() {
    $(#dialog).dialog( "close" );
};

$('#dialog').dialog({
    modal: true,
    buttons: {
        Ok: closeFunction
    }
});

score 0 · Accepted Answer

我有一个类似的问题，在我的情况下，问题是不同的（我使用的是 Django 模板）。

JS 的顺序不同（我知道这是您检查的第一件事，但我几乎可以肯定情况并非如此，但确实如此）。调用对话框的 js 在调用 jqueryUI 库之前被调用。

我正在使用 Django，因此继承了模板并使用 {{super.block}} 将代码从块以及模板继承。我不得不在解决问题的块末尾移动 {{super.block}}。调用对话框的 js 是在 Django 的 admin.py 中的 Media 类中声明的。我花了一个多小时才弄清楚。希望这可以帮助某人。

javascript - JQuery 错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”

20 回答 20

Related

Reference