对象不支持属性或方法“对话框”答案

【问题标题】：Object doesn't support property or method 'dialog'对象不支持属性或方法“对话框”
【发布时间】：2017-08-21 05:53:26
【问题描述】：

我正在尝试通过在我的应用程序中使用 jquery 来实现模式对话框。一旦我点击一个按钮，它应该通过弹出一个模式对话框来显示一个网页（url）来工作。但我不断收到 JavaScript 运行时错误：

对象不支持$("#dialog").dialog("open") 行中的属性或方法“对话框”错误。

我已经在我的应用程序中包含了这些 jquery 脚本。我正在使用 jquery-ui-1.12.1.zip 中的脚本。这是我的代码供您参考。

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>

<script>
        $(document).ready(function () {
            $("#btnProdHierarchy").click( function() {
                $("#dialog").load(PMASTERLINK, function() {
                    $("#dialog").dialog("open");
                    return false;
                }
                )
            })
        });
</script>


<div id="dialog" title="Basic dialog"></div>
<input id="btnProdHierarchy" type="button" value="Product Master"  accesskey="H" />

请帮我解决这个问题。谢谢！

【问题讨论】：

你为什么两次附加jquery-ui？？

标签： javascript jquery jquery-ui dialog

【解决方案1】：

这对我有用：

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $("#btnProdHierarchy").click( function() {
            $("#dialog").load(PMASTERLINK, function() {
                $("#dialog").dialog().dialog("open");
                return false;
            })
        })
    });
</script>


<div id="dialog" title="Basic dialog"></div>
<input id="btnProdHierarchy" type="button" value="Product Master" accesskey="H" />

很明显，我用别的东西替换了PMASTERLINK。

【讨论】：

【解决方案2】：

您的对话框加载错误。尝试先阅读 jquery-ui 文档。在您的代码中“PMASTERLINK”也是未定义的！

对话框应该定义如下：

 $( "#dialog" ).dialog({
  autoOpen: false,      
});

你的按钮应该是这样的：

$( "#dialogBtn" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});

就是这样！

HTML：

<div id="dialog" title="Basic dialog">
 <p>Your Dialog Text</p>
</div>

<button id="dialogBtn">Open Dialog</button>

例如：https://jsfiddle.net/emilvr/ebgkmw79/1/

【讨论】：