jQuery UI 对话框问题答案

【问题标题】：jQuery UI dialog issuejQuery UI 对话框问题
【发布时间】：2015-12-07 03:29:18
【问题描述】：

我正在尝试创建 jquery 对话框，但没有用:( 这是我的 jQuery 代码：

$(document).ready(function() {
    createDialog();

});
function createDialog() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-form").dialog(
            {
                autoOpen : false,
                height : 475,
                width : 350,
                modal : true,
                buttons : {
                    "submit" : function() {

                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        postText();
                            $(this).dialog("close");
                        }
                    },
                    cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

    $(".add-org").click(function() {

            $("#dialog-form").dialog("open");
    });
}

这里是html代码：

<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
    rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/resources/js/myScript.js'/>"></script>

    <a href="javascript:void(0)" class="add-org">New </a>

<div id="dialog-form" title="Add New ">
    <p class="validateTips">All form fields are required.</p>
    <form>
    ..................
    </form>
</div>

萤火虫说：

TypeError: $("#dialog:ui-dialog").dialog 不是函数

$("#dialog:ui-dialog").dialog("destroy");

在我的页面上，我看到了表单中的所有字段。那我的问题是什么？

【问题讨论】：

你准备好里面的文件了吗？
你的js文件“jquery-ui-1.8.21.custom.min.js”是否包含jquery对话框插件？
你用的是哪个版本的jquery？
查看更新，@allentranks，在 jquery-ui-1.8.21.custom.min.js 文件中使用了搜索，-是的，它包括
如果您评论此行是否有效 $("#dialog:ui-dialog").dialog("destroy"); ?

标签： javascript jquery html modal-dialog jquery-ui-dialog

【解决方案1】：

试试这个：工作演示 http://jsfiddle.net/kEZkh/

不确定您的源路径是否正确，请包含以下脚本。

休息，请随意玩演示并希望它有助于事业:)

脚本

      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">


      <link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">

      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

代码

$("#forgot").click(function(e){ 
    $("#dialog-form").dialog("open");
    e.preventDefault();
});

$("#dialog-form").dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
});

【讨论】：

添加了包括您列表中的文件，它有帮助
为什么要添加两次jquery ui？

【解决方案2】：

如果脚本文件加载成功，请检查 Firebug/DevTools。如果是，请在控制台（Firebug、DevTools）中输入或更好，将该行放在执行其他代码的位置：

console.debug(jQuery.ui)

If it shows undefined, then jQuery UI was not loaded (yet). 在加载所有内容之前检查您的代码是否运行，将其放在 jQuery 的$(document).ready(); 中。如果它是一个对象，请检查它并检查 dialog 属性。

如果您在 jqueryui.com 上配置了自定义构建，请仔细检查您是否包含对话框小部件。

【讨论】：

我猜这意味着要么根本没有加载 jQuery UI 文件，要么你的代码在加载和评估之前运行。 1：检查开发人员工具中的网络选项卡，您应该会看到对该文件的请求。 2：你的代码在myScript.js，你肯定在jQuery UI之后加载它？

【解决方案3】：

destroy 调用应与您在创建对话框时使用的元素相同，而不是包裹在内容周围的 .ui-dialog 容器：

$("#dialog-form").dialog('destroy');

由于您当前的代码正在引发异常，因此应该创建对话框的后续行永远不会被调用。

如果你想销毁可能已经打开的每一个对话框，jQuery UI 可以轻松地在每个内容 div 上放置一个.ui-dialog-content 类：

$('.ui-dialog-content').dialog('destroy');

【讨论】：