Complete script:
<!doctype html>
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
The location dojo1.7/dojo/dojo.js is correct(checked on firebug). The error now I am getting is
ReferenceError: dojo is not defined
console.log(dojo)
So what do I missed here?
Use a doctype.
Scripts are loaded and executed in the order they are defined in HTML, so scripts that define objects need to be placed before the script that uses the object.
A global dojo object is never defined when you are running in async mode. You need to use the global require function to explicitly load dependencies:
require([ 'dojo/dom', 'dojo/on' ], function (dom, on) {
// code here
});
Try to put the console.log(dojo); script block below the actual script. Now you're actually looking for dojo at the moment it isn't there yet.
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
Related
I wrote the following code in my test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item {
background:blue;
color:yellow;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById("item");
TweenLite.to(logo, 2, {left:"542px", backgroundColor:"red", borderBottomColor:"#90e500", color:"white",ease:Expo.easeOut});
}
</script>
</head>
<body>
<p id="item">thsi is a para</p>
</body>
</html>
But when I run it, I get the error message in console
Uncaught ReferenceError: Expo is not defined
at window.onload (test.html:16)
How can I use Expo.easeOut?
To do easing, you have to include EasePack too:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
(Or use TweenMax instead, wich includes CSSPlugin and EasePack among other features.)
I'm trying to understand the "elm-make" command. I built 2 .elm files call Foo.elm and Bar.elm. I'd like to display them in a HTML file of this format :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="elm.js"></script>
</head>
<body>
<h2>Foo</h2>
<div id="foo-app"></div>
<h2>Bar</h2>
<div id="bar-app"></div>
</body>
<script type="text/javascript">
Elm.embed(Elm.Foo, document.getElementById("foo-app"));
Elm.embed(Elm.Bar, document.getElementById("bar-app"));
</script>
</html>
But Elm.Foo and Elm.Bar do not exist. Only Elm.Main.
Tried to compile with this command: elm make Foo.elm Bar.elm --output elm.js. What am I doing wrong ?
It's because I did not have the module declared at the top of my files, so it implied Main :
module Foo where
The first hello dojo tutorial which is provided at the main site https://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html did not work for me.
I copy pasted the code, but the 'Hello' remains as is. The em tag does not get added. Any help!
I downloaded the dojo.js and put the file in the same place where the hellodojo.html is. And then I changed the code of hellodojo.html as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="./dojo.js" data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function(dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!!~!!</em>', greetingNode);
});
</script>
</body>
</html>
Here you will see I changed the statement
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
to
<script src="./dojo.js" data-dojo-config="async: true"></script>
And then it worked as expected, since the dojo.js is now available.
I could see 'dojo.js' in chrome extension in source too.
I am having trouble getting a reference to the dijit form widget when the form contains a DateTextBox. The code snippet below demonstrates the problem. When executed, the alert box says "undefined". However, if I get rid of <input ... id="dateTextBox"... />, I am able to get a reference to the form widget.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
</script>
<script type="text/javascript">
require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dojo/domReady!"],
function(parser, registry) {
parser.parse();
alert(registry.byId("frm_test"));
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="frm_test" encType="multipart/form-data" action="" method="">
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
</body>
</html>
I'd recommend wrapping the registry.byId into a ready call.
Keep parse onLoad: true, remove
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
as the parser will auto require (when dojo>= 1.8) and use the following:
<script type="text/javascript">
require(["dojo/ready", "dijit/registry", "dojo/domReady!"],
function(ready, registry) {
// by default the prioirty of this ready call will be after the
// ready call used to parse when parseOnLoad is true
ready(function() {
alert(registry.byId("frm_test"));
});
});
</script>
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser
Thus when working with widgets you should generally put your code
inside of a dojo/ready() callback
http://dojotoolkit.org/reference-guide/1.9/dojo/domReady.html
http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html#dojo-ready
I need to change the dojo namespace to something else. I found this stackoverflow post, but it refers to a dojo documentation page that no longer exists. Below is something I tried based on this page, but didn't work:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="scopeMap: [[ 'dojo', 'newns' ]]"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>
Help!
I just pulled the document out of the old Dojo book and put it in the new doc system:
http://docs.dojocampus.org/multiversion/index
For your specific example, the djConfig object needs to be declared in a script tag before the Dojo file loads, and it is recommended that you map dijit and dojox too:
<html>
<head>
<script>
var djConfig = {
scopeMap: [
['dojo', 'newns'],
['dijit', 'newnsw'],
['dojox', 'newnsx']
]
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>