When creating a new project, I have selected to include the dojo toolkit. I can import dojo.js using src="dojo/dojo.js". However when I try importing some other modules such as dijit.js using
require(["dijit/dijit"], function(){})
...I always get an error in the web console (ie the resource is not found). The problem is not applied when I import dojo modules. How can I fix this?
Make sure, you have configured Dojo correctly, kindly find the Dojo configuration which I have been using in my Hybrid App.
<script>
var dojoConfig = {
baseUrl: "js",
packages: [
{ name: "dojo", location: "dojo/dojo"},
{ name: "dijit", location: "dojo/dijit"},
{ name: "dojox", location: "dojo/dojox"}
],
isDebug: false,
async: true,
parseOnLoad: true,
deps:['app/main']
}
</script>
If you still not able to resolve it, try to make a sample use case or jsfiddle, would look into it further.
You made simple mistake of syntax:-
To require js file instead of require[("dojo/parser")]
you have use require(["dojo/parser"],function(parser){})
Related
I'm trying to get widgets like dojox.layout.ContentPane working properly in a Netbeans Cordova environment for Android and iOS. I'm using as the main contentPane that will render the pages based on what the user press. Is it possible to get it working or are there better alternatives in Dojo for this purpose?
<script type="text/javascript">
require([
"dojox/layout/ContentPane",
"dijit/registry",
"dojo/domReady!"
], function(
ContentPane,
registry
) {
var contentPanel = new ContentPane({
ioMethod: dojo.xhrPost,
executeScripts:"true",
style: "height: 100%",
region:"center"
},"contentPanel");
contentPanel.setHref("home.html");
});
<div id="contentPanel" padding-bottom:10px">
</div>
This is the error line that appears in firebug console
var error = new RequestError('Unable to load ' + response.url + ' status: ' + _xhr.status, response);
Update1: Am suspecting that this is related to Android SDK issue that many others are facing which is caused by _ characters in many of the Dojo files (Google Issue link). Dojo Build was suggested. But I have not manage to "build everything into 1 file" that has been suggested to work
The Dojo Build profile I tried:
var profile = (function(){
return {
basePath: "./../../../../../web/html/js/",//file path start from Util\dojoSDK\util\buildscripts\profiles
releaseDir: "./../../../Util/release",
action: "release",
layerOptimize: "closure",
optimize: "shrinksafe",
cssOptimize: "false",
mini: false,
stripConsole: "normal",
selectorEngine: "acme",
packages:[/**/{
name: "dojo",
location: "../../../Util/dojoSDK/dojo"
},{
name: "dojox",
location: "../../../Util/dojoSDK/dojox"
},{
name: "dijit",
location: "../../../Util/dojoSDK/dijit"
}],
layers: {
"dojo/dojo": {
include: [
"dojo/dojo",
"dojo/i18n",
"dojo/domReady",
"dojo/parser"
*all .js files in Dojo with _*
],
customBase: true,
boot: true
}
}
};
})();
FINAL UPDATE: Apparently this is NOT caused by the underscore issue highlighted in Update1 above. I have reused the complete example code from Dojo Flickr demo FINAL and integrated dojox.layout.ContentPane to it and EVERYTHING works fine. Unable to say what exactly helped but I suspect it to be the way the dojo loader is written with things like dojox/mobile/parser and dojox/mobile/compat.
I have since looked into dojo.mobile modules as suggested by frank
For mobile layout you can use dojox/mobile/view.
Here is a good tutorial (sample mobile app) on dojo mobile to get you started.
http://dojotoolkit.org/documentation/tutorials/1.10/mobile/flickrview/part2/
I have a dojo require as
window.config= {
async: false,
paths: {
'thirdParty' : 'https://s3.amazonaws.com/thirdPartyJSSrc'
}
};
In Page Javascript I am using thirdParty as
require([
'thirdParty'
], function(){ });
Now if my thirdPartyJSSrc returns 404 the other buttons handlers from JS is not working..It is showing the following error
Failed to load resource: the server responded with a status of 404 (Not Found)
Error {src: "dojoLoader", info: Array[2], stack: (...), message: "scriptError"}
Because of this error no JS is working on other elements of page..
I don't want to include the JS if particular JS returns 404 on the page..Anyway to do this?
I suggest config your dojo with dojoConfig, see documentation here.
e.g
dojoConfig = {
baseUrl: "js/",
packages:[
{ name:"dojo",location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/"},
{ name:"dijit", location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/"},
{ name:"dojox", location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojox/"},
{ name:"thirdParty",location:"https://s3.amazonaws.com/thirdPartyJSSrc"}],
parseOnLoad : true,
async : false,
isDebug: true,
locale: 'en'
};
I should you to use "dojo/has" for test if exist your "thirdParty" JS. The dojo/has module is Dojo’s feature-detection API. It provides a simple, consistent, and easily extensible approach for evaluating existing feature tests, and for creating your own custom feature tests. dojo/has also implements the AMD loader plugin API, which allows you to use it to conditionally load modules. See "Dojo FAQ: How can I conditionally load AMD modules?" for more detail.
I use dojo 1.8.6 and socket.io 0.9.16, after I load socket.io.js client, dojo.require conflict is happened and no more dojo module can load.
require([ 'socket.io/socket.io' ]) cause error.
TypeError: Cannot read property 'push' of undefined
I can't use "dojox/socket" for some reason.
Anybody have any idea?
As of dojo 1.11 the following is working fine:
packages: [
"dojo",
{name: "socketio", location: "/socket.io", main: "socket.io"}
]
with module loading:
define([
"socketio"
], function (socketio) {
var socket = socketio();
});
I assume its working in prior versions as well but i have not tested it.
Alternatively you could directly refer to the socket.io module as it is AMD compliant.
define([
"/socket.io/socket.io.js"
], function (socketio) {
var socket = socketio();
});
Unfortunately the builder does still report an 311 error (missing dependency) hence not breaking the build. Can't work around this as there is no package.js where to mark as copy only...
The require statement needs to be a valid AMD mid (module identifier).
Usually, people will add the package to their config, e.g.:
var dojoConfig = {
packages: [
{name: 'socketio', location: 'path/to/socket.io/socket.io'}
]
}
and then require it:
require(['socketio'], function (socketio) {
// do something with socketio
});
As far as why you cannot use dojox/socket, I don't see any code to comment on. You might also want to check out https://github.com/bryanforbes/tube , which is a draft of a replacement for dojox/socket.
So I can see that the file was loaded properly from the dojoConfig reference but, when I attempt to use the module its 'undefined' any suggestions:
Updated: This will load the file, but when I throw the variable into a console nothing comes out. When inspecting it, I see a lot of text instead of the array of objs I placed inside.
index.html:
<script>
dojoConfig = {
tlmSiblingOfDojo: true,
async: true,
parseOnLoad: false,
packages: [
{ name: "main", location: "/components/3.6compact/js/dojo/dojo/main"},
{ name: "jquery", location: "/scripts/libs", main: "jquery"},
{name: "jam", location: "/scripts/mylibs", main: "lod"}
]
};
</script>
<script src="/components/3.6compact/js/dojo/dojo/dojo.js"></script>
<script src="/scripts/app.js"></script>
lod.js:
define([], function(){
var lod = [{
'level': 0,
'resolution': 156543.033928,
'scale': 591657527.591555
}, {
'level': 1,
'resolution': 78271.5169639999,
'scale': 295828763.795777
}
];
return lod;
});
app.js:*
require(['jam'], function(jam){
console.log(lod);
});
It's hard to provide an example on something like jsfiddle where we can't specify resources by file path, but I think the problem is with the module id in your javascript. In your dojoConfig, the location property defines the path to the directory where modules in that package can be located.
If your lod module is located at in /scripts/mylibs/lod.js, then you'd need to require lod/lod:
require(['lod/lod'], function(lod) {
console.log("lod module:", lod);
});
Here's the documentation for dojo config. I would look at the "Loader Configuration" section.
I attempted a jsfiddle anyway, which could be useful: http://jsfiddle.net/tupton/ftN6h/
Note the errors in the console:
'lod':
GET http://fiddle.jshell.net/scripts/mylibs/LOD.js 404 (Not Found)
and 'lod/lod':
GET http://fiddle.jshell.net/scripts/mylibs/lod.js 404 (Not Found)
I'm not familiar with the "main" property of the package config, but it looks like that's what it's using when you try to require an entire package. Maybe try changing that to "lod" so it looks for ".../lod.js"?
In our Dojo system, we have something like the following specified in our dojoConfig:
packages: [{
name: "myWidgets",
location: "/js/libs/widgets"
}]
So that in our require statements, all we have to do is something like:
require(["myWidgets/myCalendarWidget"....
The problem is when I run the build, this dojoConfig is not available and I get numerous missing dependency errors because 'myWidgets' isn't defined according to the build profile.
Now, I've tried adding a package block to the build profile also, but the end result of that is to create an actual 'myWidgets' package, which I don't want.
So, is there any way to make the build see the definition of the 'myWidgets' alias, yet have the end result of the build output still mirror the regular file structure (i.e. /js/libs/widgets)? I tried to define these path aliases in the defaultConfig element in the build profile and that doesn't work either.
If you are using a profile, you can specify the packages in the profile
/util/buildscripts:./build.sh profile=../../../myProfile.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#profile-basics
You can also specify a javascript file that holds the dojoConfig
/util/buildscripts:./build.sh --dojoConfig ../build/examples/dojoConfig.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#using-a-package-configuration
Answer to your comment. The path is relative from where dojo.js is.
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
paths: {
"evf": "../../evf"
}
};
My directory structure looks like
js/dojo-1.8.0
dijit
dojo <-- contains dojo.js
dojox
util
js/evf
myCustomWidget.js