我跟着the dojo tutorial显示“条款和条件”对话框。道场版本是1.7.0。我用chrome测试了这个例子。在我的测试页面中,我右键单击以显示菜单,然后选择项目“Inspect Element”。我在选项卡控制台中发现了一条错误消息错误消息是:
Uncaught TypeError: Cannot call method 'show' of undefined
showDialogdialog
(anonymous function)
onclickdialog
然后我去了dojo api page。我发现dojo 1.7.0没有类dijit.Dialog
下的任何方法。那么如何显示对话框使用dojo 1.7.0?任何的想法?非常感谢你。
答案 0 :(得分:4)
Google CDN似乎存在问题,因为教程示例适用于Dojo 1.7的本地副本。
Dojo加载程序加载文件Dialog.js,但无法解析它,导致“parser.js:8未捕获错误:无法加载类'dijit.Dialog'”。
dijit.Dialog.show()方法缺失,因为Dialog小部件未实例化,dijit.byId(“terms”)返回“undefined”。
通过脚本标记解决此负载dijit.Dialog类/文件:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dijit/Dialog.js"></script>
我将此问题填入Dojo错误跟踪器:Ticket #14415。
答案 1 :(得分:0)
从错误消息中,对话框对象为undefined
。您仍然使用show
功能来显示dijit.Dialog
。仔细检查dijit.Dialog
实例是否已成功创建。
示例代码:
var dlg = new dijit.Dialog({
id: "myDialog",
title: "Sample",
content: "<div>Hello World!</div>"
});
dlg.show();
您无法在api文档中看到show
函数的原因是因为此show
函数实际上是在内部类dijit._DialogBase
中声明的。
答案 2 :(得分:0)
我已尝试使用dojo 1.7.1,并且使用此代码 http://jsfiddle.net/nv4YC/ dojo 1.7.0也可以。
From your link (the dojo tutorial) 它必须改变
dojo.require("dijit.Dialog");
并且脚本标记应该 async:true
喜欢这个 data-dojo-config="async: true, parseOnLoad:true"
让我们在我的jsfiddle上查看或尝试此代码
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
// Show the dialog
showDialog = function showDialog()
{
registry.byId("terms").show();
}
// Hide the dialog
hideDialog = function hideDialog()
{
registry.byId("terms").hide();
}
});
</script>
</head>
<body class="claro">
<button onclick="showDialog();">View Terms and Conditions</button>
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'"
id="terms">
<p>
<strong>Please agree to the following terms and conditions:</strong>
</p>
<div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit
massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis
urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis
massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus
ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et
rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices.
Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat,
lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper
risus est et erat....</p>
</div>
<button onclick="hideDialog();">I Agree</button>
<button onclick="alert('You must agree!');">I Don't Agree</button>
</div>
</div>
</body>