Jquery UI 对话框：从内部关闭

Question

我正在尝试从外部加载的文件中关闭 jQuery UI 对话框，该文件包含一个链接，单击该链接应该关闭拨号。

“基础”文件包含以下内容：

<div id="dialog-operations"><div id="dialog-content"></div></div>
<a href="#" id="search-client-button">Search</a>

还有脚本：

$("#dialog-operations").dialog({
    autoOpen: false,
    title: "Search",
    width: 800,
    height: 500,
    modal: true,
    position: { my: "center center", at: "center center" },
    open:  function(event, ui) {
        $('#dialog-content').load('myFile.html');
    },
    close: function() {
        $(this).dialog('close');
    }
});

$("#search-client-button").click(function() {
    $("#dialog-operations").dialog("open");
});

动态加载的myFile.html 通过 Ajax 执行搜索并显示一些执行某些操作的链接，最后应该关闭对话框（在以下示例中，我只是尝试在 Ajax 完成时关闭对话框）：

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // not working
        $("#dialog-operations").dialog( "close" ); // not working
        $(this).dialog("close"); // not working
        this.close(); // not working
        $(this).dialog().dialog("close") // not working
});

对话框没有关闭，并且在 FireBug 控制台中我收到有关未定义方法或以下方法的错误：

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

我做错了什么？甚至可以从加载 Ajax 的文件中关闭对话框吗？我正在使用 jQuery 1.11.0 和 jQuery UI 1.10.4。

如果有任何建议，我将不胜感激！

编辑

经过@Justin 的帮助和多次深思熟虑，这是我最终得到的代码。重要的信息是：首先加载文件，然后定义对话框！

$("#dialog-content").load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

});

并在包含的文件中（仅重要片段）：

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
    $("#dialog-operations").dialog("close");
});

不幸的是，这种方法打破了分离（包含的文件引用了父文件中定义的容器），所以我可能会停止包含来自不同文件的 Dialog 内容的想法。但那是另一回事。

Answer 1

尝试删除 ajax 配置中的 context 选项，或尝试将 context 选项更改为 DOM 元素 而不是 this。

编辑

我想我现在知道你哪里出错了。这可能是因为 $.ajax 函数 在您的加载函数首先完成它自己的 ajax 请求之前已经由 javascript 执行。尝试运行您的加载函数，然后为它的第二个参数提供一个回调函数，该函数创建对话框和其他内容。我删除了打开选项

open:  function(event, ui) {
    $('#dialog-content').load('myFile.html');
}

在您的对话框初始化中。

$('#dialog-content').load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" },
        close: function() {
            $(this).dialog('close');
        }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

    $.ajax({
        url: "search.php",
        data: $("#search-user-form").serialize(),
        type: "GET",
        context: this
    }).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // TEST
        $("#dialog-operations").dialog( "close" ); // TEST
        $(this).dialog("close"); // TEST
        this.close(); // TEST
        $(this).dialog().dialog("close") // TEST
    });
});