Question

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

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

<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执行搜索，并显示一些执行某些操作的链接，最后应关闭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
});

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

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

我做错了什么？甚至可以从加载Ajax的文件中关闭Dialog吗？我正在使用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配置中的上下文选项，或尝试将上下文选项更改为 DOM元素，而不是此。

修改

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

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

Jquery UI对话框：从内部关闭

1 个答案: