Jquery UI对话框：从内部关闭

I'm trying to close jQuery UI Dialog from within externally loaded file, which contain a link, which clicked should close the dial.

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

The "base" file contains the following:

“base”文件包含以下内容：

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

And the script:

和剧本：

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

Dynamically loaded myFile.html performs the search via Ajax and shows some links that perform some actions and at the end should close the Dialog (in the following example I just try to close the Dialog on Ajax complete):

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

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

The Dialog doesn't close, and in FireBug console I receive errors on undefined methods, or the following one:

Dialog没有关闭，在FireBug控制台中，我收到未定义方法的错误，或者下面的错误：

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

What am I doing wrong? Is it even possible to close the Dialog from within a file loaded with Ajax? I'm using jQuery 1.11.0 and jQuery UI 1.10.4.

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

I'd greatly appreciate any suggestions!

我非常感谢任何建议！

EDIT

编辑

After @Justin's help and many deliberations this is the code I finally end up with. The important info is: first load the file, and then define the Dialog!

在@ 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");
    });

});

And in the included file (the important fragment only):

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

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

Unfortunately this approach breaks the separation (the included file makes reference to container defined in parent file), so probably I'll just cease the idea of including the Dialog content from a different file. But that's a different story.

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

1 个解决方案

#1

Try removing the context option in your ajax config or try changing the context option to a DOM element instead of this.

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

EDIT

编辑

I think I know now where you went wrong. It may be because the $.ajax function has already been executed by javascript before your load function has first finished it's own ajax request. Try running your load function and then supply to it's 2nd parameter a callback function that creates the dialog and other stuffs. I removed the open option

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

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

in your dialog initialization.

在对话框初始化中。

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