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.
Related
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
I have created a dojo based Worklight project and a hybrid application it.
I did a drag and drop of a dojo mobile button which gets added inside a dojo mobile view. All of this works fine and renders fine in the various environments (common, android etc.). It also correctly shows the look and feel in Rich Page Editor.
But then i added a script that has a very simple dojo.ready call. Now when i run this application i get a console error saying ReferenceError: dojo is not defined. Any idea why that is happening?
I know that i have correctly setup the dojo as other pieces seem to work. I have also checked that the dojo.js is loading (which is obvious as the other pieces are working). I am using IBM Worklight 6.0 developer edition with all capabilities installed.
Here is my sample code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jmdwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/jmdwl.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<script>
dojo.ready(function() {
alert("Here");
});
</script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<!--application UI goes here-->
<button data-dojo-type="dojox.mobile.Button">Label</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/jmdwl.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Thanks,
Gaurav
If you want to use dojo.ready you must initialize it first.
<script>
require(["dojo/ready"], function(ready){
ready(function() {
alert("Here");
});
});
Here's the reference : http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
Update 1
Which Version of dojo do you use by now? 1.6 or 1.7+ ?
The new AMD requires to initialize the modules like i write before.
Have you read this threads? There seem to be an failure while importing the dojo Libarys. I guess this could have something to do with your error.
worklight fail to require DOJO Combobx on real device -fail to load ... /dijit/form/nls/it/ComboBox.js
and
Worklight core-web-layer.js errors
Regards, Miriam
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>
This is really weired, I'm trying to use dojo.image.Gallery, but when I require the dojox.image.Gallery, the dojo.addOnLoad() does not fire, however if i comment the line which require dojo.image.Gallery, i can see 'onload' in the console, code is like below
anything i missed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the Image Gallery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dojox.image.Gallery');
dojo.require('dojox.data.FlickrRestStore');
dojo.require("dojo.parser"); // find widgets
dojo.addOnLoad(function(){
console.log('onload');
});
</script>
</head>
<body>
<h1 class="testTitle">dojox.image.Gallery</h1>
</body>
</html>
I do have this same problem. After some effort, I happened to find out that with the full version dojo-release-1.7.2-src, it WORKS. Does it have anything to do with javascript compression? Kindly share if any one happens to know why...
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>