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

【问题标题】：JQuery Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'JQuery 错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
【发布时间】：2013-03-10 04:02:09
【问题描述】：

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

错误：无法在初始化之前调用对话框上的方法；试图调用方法'close'

插件

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

【问题讨论】：

我没有收到此错误：jsfiddle.net/ztPUj。但是小提琴使用 jQuery UI 1.9.2，如果这有什么不同的话。如果不是，则必须是您未发布的其他代码导致问题，如果您不提供更多信息，我们将无法为您提供帮助。
那就是 jQuery UI 1.9.2 并且有效，您可以提供一个答案让我接受
您甚至可以考虑 1.10.2，这似乎是当前的稳定版本。
有没有办法在页面上指定 jquery 插件的最新稳定版本，以便自动找到它？
我使用的是 1.10.2，但仍然出现此错误。我的设置有点不同，但是当我调用.dialog('close') 时，对话框已经非常初始化，并且错误仍然发生。

标签： javascript jquery html jquery-ui

【解决方案1】：

看起来您的按钮未正确声明（无论如何根据latest jQuery UI documentation）。

尝试以下方法：

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

【讨论】：

文档说：“支持多种类型：-对象：键是按钮标签，值是单击关联按钮时的回调。-数组：[... ]”。看起来这就是 OP 所拥有的，根据文档它很好。
非常正确。也许代码中还有其他一些事情没有在 OP 中显示......
这是公认的答案，这是完全有道理的。它解决了问题，因为 jqueryui 文档中的一些示例是错误的（特别是 {name:callback} 变体。来源：我遇到了完全相同的问题，更改了我的按钮定义，问题得到了解决。

【解决方案2】：

试试这个 - 它对我有用：

$(".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;
});

希望对你有帮助

【讨论】：

投了赞成票的人能解释一下究竟是什么造成了不同吗？我看到第二次打电话给dialog()，这次是dialog('open')，但我试过了，但没有任何区别。这里还有什么不同？
对我来说，它是明确声明对话框名称，而不是使用 'this'

【解决方案3】：

我在 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');
});

【讨论】：

【解决方案4】：

您的$(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" );
                }
            });
        }
    }
});

【讨论】：

【解决方案5】：

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

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

你的选择会变成：

modal: true,
autoOpen: false,
buttons: buttonArray

【讨论】：

您好，您的帖子已被系统自动标记为与this other post 重复。一旦您获得 15 个代表，正确的回应是将此类帖子标记为重复。有些人对制造噪音的帖子不屑一顾。希望这会有所帮助！

【解决方案6】：

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

像这样：

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

// . . .

dd.dialog('close');

【讨论】：

【解决方案7】：

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

【讨论】：

谢谢谢谢谢谢。浪费了一天，但你救了我。
谢谢！！这正是我的问题。
这是正确答案，应该是第一个答案。
我也遇到了同样的问题，请问如何解决？
@hardcode 从部分页面中移除 jquery 库。

【解决方案8】：

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

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

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

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

【讨论】：

它有助于调试。谢谢

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

【讨论】：

看起来每个人都在试图解决问题而不是找出原因！谢谢。

【解决方案11】：

所以你用这个：

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

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

如果您在 Dialog 中打开 MVC Partial View，您可以在索引中创建隐藏按钮和 JQUERY 点击事件：

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

然后在局部视图 html 中调用按钮触发点击：

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

再见。

【讨论】：

【解决方案12】：

当我的 ajax 替换页面上的内容并以对话框的同一个类结束时发生这种情况，这意味着当我的行关闭基于 CSS 类选择器执行的对话框时，它发现两个元素不是第一个和第二个从未初始化过。

$(".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 只替换了主要内容区域。

【讨论】：

我很难修复它，因为我专注于 JQuery，但实际问题出在 asp.net 中，我没有发送部分视图，因此它在页面上创建了两个元素。

【解决方案13】：

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

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

【讨论】：

我必须补充一点，将 cdn 版本更改为 > 1.10 似乎可以解决问题。 1.10 之前不支持定义 text:"btnLabel" 的语法

【解决方案14】：

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

我最终触发了标题上“x”按钮的点击操作：

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

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

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: 并且元素将不存在

【讨论】：

【解决方案17】：

我遇到了类似的问题，在我的情况下，问题有所不同（我使用的是 Django 模板）。

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

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

【讨论】：

【解决方案18】：

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

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

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

【讨论】：

【解决方案19】：

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

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

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

【讨论】：

【解决方案20】：

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

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

【讨论】：