dojo tutorial: dojo is not defined
Question
I want to get startet with dojo.
Therefore I am useing their tutorials: http://dojotoolkit.org/documentation/tutorials/1.8/hello_dojo/
The simplest tutorial displays this page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
I now open the page (tried both localy and hosted version on their page). And when I write
dojo.query("h1")
in my firebug console I get the message:
ReferenceError: dojo is not defined
Please help
4 answers
solution1
7 2014-02-03 13:24:53
This question is lacking a correct answer. The reason this is not working is because you enabled async mode. What this actually does is that the Dojo core will be loaded asynchronously.
The Dojo core is the part of Dojo that is loaded automatically when you load the dojo.js file. It sets a global variable called dojo which contains basic functionality like the dojo.query part.
Your problem is that you're actually not waiting for the core to load. Because the core is not loaded, dojo will be undefined , giving you that error.
You should only use async mode when using the AMD loader ( require() ), if you don't want to use it (legacy mode), you just put async to false . But this mode is actually deprecated and will be removed in Dojo 2.0.
The other solution is to use the AMD loader (asynchronous module loader), the proper syntax to this is:
require([ "dojo/query" ], function(query) {
query("h1");
});
In this example you might have the chance that the DOM is not loaded yet, so the best answer is to wait for the DOM to load as well, resulting in:
require([ "dojo/query", "dojo/domReady!" ], function(query) {
query("h1");
});
You're indicating that it's working when you use the protocol implied URL. However, this is not true. The only reason why it suddenly is working is because you left the async property away, which defaults to false .
Unlike Christofer said, the legacy mode is still available, but it's deprecated.
Agnes' answer will work because because it's using the AMD loader. However, combining legacy code and the new syntax doesn't look well. If you're choosing for AMD you should put everything in AMD and not only certain parts.
solution2
3 2013-01-30 07:51:38
Having no previous experience of Dojo, I read through a bit of the documentation. Especially this part , talking about the "Modern Dojo".
It turns out, as of version 1.7, you can no longer just load dojo.js and expect to call dojo.something . With the "new Dojo", that is no longer possible. This is why you get dojo is not defined .
For more info, read through the updated documentation on how to get started, but here is a simple hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" href="../../../resources/style/demo.css">
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
</script>
</body>
</html>
If you like to use the old way, I guess you could reference a version of Dojo prior to 1.7, but using a legacy version is rarely a good way forward, so I recommend that you learn the new way of doing things instead.
solution3
3 2013-08-14 19:12:10
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo- config="async: true"></script>
</head>
<body>
<script>
require(["dojo"], function(dojo){
dojo.ready(function(){
//Your code here
});
});
</script>
</body>
</html>
solution4
1 ACCPTED 2013-01-30 07:31:42
您确定dojo的来源位于“//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js”，因为您的文件夹结构在googleapis文件夹中显示为“ http：// ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js “
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.