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

然而，当我单击提交按钮时没有任何反应，并且在控制台中会记录错误：＆＃34;未捕获错误：在初始化之前无法调用对话框上的方法;试图调用方法＆＃39;关闭＆＃39;＆＃34;

错误指向saveNewThing开头$ .ajax

中的行

如果我再次点击提交，则进行网络通话，创建事物，关闭对话框。

所以我的问题是导致错误的原因以及如何解决？

提前致谢

哇！感谢@MaVRoSCy制作小提琴。它让我有信心说我的解决方案应该有效，现在是时候坐下来逐步完成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/', {

为什么我得到＆＃34;未捕获错误：在初始化之前无法在对话框上调用方法;试图调用方法＆＃39;关闭＆＃39;＆＃34;来自jQuery UI

1 个答案: