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>

Answer 1

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

Answer 2

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

尝试以下方法：

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

Answer 3

试试这个 - 它对我有用：

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

希望它能帮到你

Answer 4

我也得到了相同的错误：在初始化之前无法在对话框上调用方法;试图调用方法'关闭'

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

所以你用这个：

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

见你。

Answer 9

当我的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只替换了主要内容区域。

Answer 10

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

Answer 11

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

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

Answer 12

一小时后，我找到了最佳方法。我们应该在变量调用close方法后保存对话框的结果。

像这样：

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

// . . .

dd.dialog('close');

Answer 13

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

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

您的选择将成为：

modal: true,
autoOpen: false,
buttons: buttonArray

Answer 14

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

我最终解雇了＆＃39; x＆＃39;标题上的按钮使用：

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

Answer 15

Senguttuvan：你的解决方案是唯一对我有用的东西。

function btnClose（）{
  $（“UI的对话框的标题栏关闭”）触发（‘点击’）。
  }

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

Answer 17

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

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

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

Answer 18

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

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

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

Answer 19

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

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

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

Answer 20

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

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

JQuery错误：在初始化之前无法调用对话框上的方法;试图调用方法'关闭'

20 个答案: