jQuery UI 对话框函数答案

【问题标题】：jQuery UI Dialog FunctionsjQuery UI 对话框函数
【发布时间】：2011-02-03 17:31:21
【问题描述】：

我正在通过 open 事件将外部 php 页面加载到 jQuery UI 对话框中，如下所示：

$.ajax({
    url: "page.php",
    success: function(data){ 
        $("#loadDiv").dialog({
            open: function(){
                $(this).html(data);
            },
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured 
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });
    }
});

（#loadDiv 只是一个隐藏在页面上的空 div）

问题是当您单击取消按钮时，它应该关闭对话框 - 但它没有。我将 FireBug 用于 FF，它告诉我错误“$(this).dialog is not a function ... $(this).dialog("close");”。当我尝试用 $("#loadDiv").dialog("open") 重新打开它时也不起作用，我认为这两者是相关的问题。

问题是对话框的内容是通过 ajax 动态加载的，因为如果我取出 ajax 部分它就可以工作。我需要弄清楚如何让它与我现在加载内容的方式一起工作。

任何建议将不胜感激！谢谢！

【问题讨论】：

标签： jquery ajax jquery-ui dialog

【解决方案1】：

在 ajax 调用之外声明您的对话框，将 autoOpen 设置为 false。现在在成功回调中，您可以将数据附加到空 div 中，然后显示它。像这样的：

$(function() {
    $("#loadDiv").dialog({            
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });

});

$.ajax({
    url: "page.php",
    success: function(data){ 
        $('#loadDiv').html(data);
        $('#loadDiv').dialog('open');
    }

});

EDIT用JSLint修改并验证了代码。

【讨论】：

我这样做了，但我仍然遇到对话框功能无法正常工作的问题。我有一个触发 $("#loadDiv").dialog("open"); 的点击事件它不工作 - firebug 只是告诉我它不是一个函数。当我把 ajax 拿走时，一切正常
您准备好文档内的对话框声明了吗？我添加了几行。那应该可以。
只需将其放入准备好的文档中，它仍然会生成相同的错误消息。
我的代码中的右括号有错字。如果您复制并粘贴，可能就是这样。
@Victor：不，我刚刚修复了括号，但仍然无法正常工作。

【解决方案2】：

想通了，我放入对话框的页面包含 jQuery 源代码，所以我删除了该行，一切正常。

【讨论】：

【解决方案3】：

请检查文档加载完成后是否与对话框加载有关，尝试在单击事件上使用 live，并检查 $(this) 是否仍然引用对话框。

您可以在代码的早期分配一个变量来保存对$(this) 的引用，这样您就知道当您引用$(this) 时，您将引用正确的对象/元素。

【讨论】：