Menu
This is my simple dojo example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<title>ShowMovies </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo.js"></script>
<script type="text/javascript">
require(
[ "dojo", "dojo/parser", "dijit/layout/BorderContainer",
"dijit/layout/ContentPane", "dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore" ],
function(dojo) {
dojo.ready(function() {
dojo.xhrGet( {
url : "MovieList.json",
handleAs : "json",
load : function(response, ioArgs) {
var newData = {
identifier: "title",
items: response.result
};
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
var grid = dijit.byId("gridId");
grid.setStore(dataStore);
},
error : function(response, ioArgs) {
alert(response);
}
});
});
});
</script>
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="BorderContainer" style="height: 100%; width: 100%"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'" style="text-align: center">My Movie Web Application!</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<table id="gridId" autowidth="true"
data-dojo-type="dojox.grid.DataGrid"
data-dojo-props="rowSelector:'20px'">
<thead>
<tr>
<th field="title">Title</th>
<th field="director">Director</th>
<th field="actor">Actor</th>
<th field="description">Description</th>
</tr>
</thead>
</table>
</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'right'"></div>
</div>
</body>
</html>
Why do I receive an error for the xhrGet request? The response is: dijit.byid is not a function
Thx
257
The quick answer is: When you have async:true in your Dojo config, you should probably not have anything in your Javascript code that starts with dojo. or dijit..
Back in the old days, in Dojo 1.5 and earlier, Dojo and its modules worked a little differently than they do today.
At that time, you could include dojo.js and immediately have a range of handy functions available, such as dojo.create, dojo.connect, dojo.xhrGet, dijit.byId and many many more. If you wanted to include some additional module or widget, you'd use dojo.require and then reference the module with dojo.some.thing or dijit.other.thing.
In newer versions of Dojo, when you include dojo.js on your page, you effectively only get two functions: require and define. You use these functions to "import" everything you need. Even for something as small as dojo.create, you have to import a module.
In the beginning, you'll probably find this very inconvenient. If you're interested in why Dojo has taken this direction and the benefits of it, you can check out this slideshare.
Back to your code. You have async:true and lots of dojo. and a dijit. statements. Here are 3 ways you can solve it:
Change async:true to false. This makes Dojo handle code in the "old" style, i.e. your dojo. and dijit. should still work.
Keep async:true, but import the special dijit/dijit module, which makes the old dijit. functions available. So your first line(s) would be something like this:
require(["dojo","dijit/dijit",....], function(dojo, dijit, ...) {
(The "dojo" module is also a special module to allow the "old" style.)
Rewrite your code to the new AMD style all over. That means for every dojo. and dijit., you need to find out which module you need to import. It's going to be a bit of work if you already have a lot of Dojo code. The code in your question would look something like this: http://fiddle.jshell.net/8DETs/
You may be thinking to yourself: Loading a file/module for every little thing must be very slow! And you are right. The idea is that when you develop locally, it will be fast enough, and when you deploy your web app, you'll use Dojo's build tool to create a lean package in very few files. This is one of Dojo's absolute strong points, you can read more about it here: http://dojotoolkit.org/documentation/tutorials/1.9/build/
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
