jquery - 为什么我从 jQuery UI 得到 "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method ' close'"

Question

我正在维护一个应用程序，之前没有使用过 jQuery UI。该应用程序使用 jQuery-UI 1.9 和 jQuery 1.8.2

我有一个启动对话框的链接。 对话框中有一个输入字段，其内容被 PUT 到服务器以创建资源。

<div id="addThingDialog" title="Add a thing" class="dialog" style="display:none">
    <input type="text" placeholder="New Thing Name" id="newThingName"/>
</div>

我认为我正确调用了初始化，因为我可以从控制台打开和关闭对话框。并通过单击链接。我的设置是:

 $("#addThingDialog").dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            modal: true,
            buttons: {
                Submit: {
                    text: "Submit",
                    'class': 'green',
                    click: saveNewThing
                },
                Cancel: {
                    text: 'Cancel',
                    'class': 'purple',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            }
        });

saveNewThing 方法如下所示:

function saveNewThing() {
    var name = $('#newThingName').val();

    if (!name) {
        alert('You must provide a thing name');
        return;
    }
    console.log('saving ' + name);
    $.ajax('/api/things/' + name,
        {
            type: "PUT",
            dataType: 'json',
            contentType: 'application/json',
            success: function (result) {
                //now reload the current tab
                $('#addThingDialog').dialog('close');
            },
            error: function (xhr, status, error) {
                console.log(error);
                $('#addThingDialog').dialog('close');
            }
        });
}

但是，当我单击提交按钮时，没有任何反应，并且在控制台中记录了一个错误:“未捕获错误:无法在初始化之前调用对话框上的方法；尝试调用方法“关闭””

错误指向 saveNewThing 中以 $.ajax 开头的行

如果我第二次单击“提交”，则会进行网络调用、创建事物并关闭对话框。

所以我的问题是导致错误的原因以及如何修复它？

提前致谢

<小时/>

哇!感谢@MaVRoSCy 制作了 fiddle 。这让我有信心说我的解决方案应该有效，现在是时候坐下来逐步执行 jQuery 代码了。

这导致我:

$("body").on({
    ajaxStart: function () {
        $(".dialog").dialog('close'); //oh oh!
        $(this).addClass("loading");
    },
    ajaxStop: function () {
        $(this).removeClass("loading");
        resizeDashboard();
    }
});

注释掉行关闭对话框并选择类解决了我的问题。我不太清楚为什么，但我还是很高兴。

感谢@MaVRoSCy - 我知道停下来制作一个简单的问题版本，但忘记了。

Answer 1

我想你一定错过了什么。

这是一个fiddle你的代码并且工作得很好。

我唯一改变的是这个(只是为了进行有效的 Ajax 调用):

$.ajax('http://jsfiddle.net/echo/jsonp/', {