jQuery UIから「UncaughtError：初期化前にダイアログでメソッドを呼び出せません。メソッド 'close'を呼び出そうとしました」というメッセージが表示されるのはなぜですか。

私はアプリケーションを保守していて、これまでjQueryUIを使用したことがありません。アプリケーションはjQuery-UI1.9とjQuery1.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');
            }
        });
}

ただし、送信ボタンをクリックしても何も起こらず、コンソールにエラーがログに記録されます：「キャッチされないエラー：初期化前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました」

エラーは、$。ajaxで始まるsaveNewThingの行を指しています。

もう一度[送信]をクリックすると、ネットワークコールが発信され、Thingが作成され、ダイアログが閉じます。

だから私の質問は、エラーの原因とそれを修正するにはどうすればよいですか？

前もって感謝します

うわー！フィドルを作ってくれた@MaVRoSCyに感謝します。私のソリューションは機能するはずだと自信を持って話せたので、今度はjQueryコードをじっくりと見ていきましょう。

それは私を導きました：

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

行を閉じるダイアログをコメントアウトし、クラスを選択すると、私の問題は解決しました。理由はよくわかりませんが、それでも幸せです。

@MaVRoSCyへの称賛-私は問題の簡単なバージョンを停止して作成することを知っていますが、忘れていました。