I am working on the Migration of Dojo from 1.4 to 1.8. I have a project in which there are some jsp pages in which dojo is written and it takes the path of dojo from an xml file.
I have changed the path from dojo 1.4 Library to dojo 1.8 Library, but after doing this the referneces to the dojo widgets are throwing an error
e.g dijit.byId("idofwidget")
ERROR : dijit.byId("idofwidget") is null or not an object.
Please guide how to resolve the issue and it would be better if basics steps to upgrade can be provided.
Thanks in Advance
If you're really going to upgrade to Dojo 1.8, then you will have to rewrite your code into AMD, for example:
// Load the modules you need
require([ "dijit/registry", "dojo/ready", "dojo/parser" ], function(registry, ready) {
// Wait until DOM is finished + widgets on the page are parsed
ready(function() {
// Retrieve widget instance
registry.byId("idofwidget");
});
});
One important thing to know is that you don't upgrade Dojo, you migrate it (at least when using pre- and post-1.7). This usually involves that you can not simply change the Dojo library, but you will have to migrate your code as well.
There are some articles about migrating from pre-1.7 to post-1.7, for example this article about migrating.
Sitepen also provided a tool called the Dojo AMD converter which can convert your modules into AMD syntax, it's not 100% guaranteed that it will work, but it puts you one step closer (at least). They also have an article about migrating, which you can find here.
Related
I am helping a co-worker with a issue in a production datatbase. The database makes use of a visual indicator to show the user during long partial refreshes. We are in the process of upgrading the application to Notes 9.0.1.
The method that is used is described in detail in this blog post by Eric Tomenga: https://www.socialbizug.org/blogs/tomenga/entry/dojo_loading_image_indicator_while_partial_refresh_loads_data?lang=en_us (blog that Eric's references appears to be offline)
The code is not altered from what is shown in the post. Works in 8.5.3 completely, but in 9.0.1, the "Please Wait" works but the spining image is absent.
My suspicion is that newer dojo version that Notes 9 uses changes something that breaks this. Downgrading dojo versions is not an option. Hoping for a workaround.
<xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
<xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
<xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>
This is added to the element you want to use it with (button in this case). The following dojo modules are added to XPage resources: extlib.dijit.ExtLib + extlib.dijit.Loading
I'm pretty sure you'll need to add the relevant Dojo module as well. You can see a working example of the code on the Admin page of the XPages Extension Library demo database. I can't remember off-hand which dojo module it is, so please post here if that solves it.
I'm trying to migrate an application from dojo 1.6 to version 1.9.1, and I've a legacy module that I didn't want to migrate yet (it's pretty complex and will take me some time to understand). The Dojo docs indicate you can load legacy modules along with AMD modules, but when I try, I'm getting a "dojo.provide is not a function" when the loader tries to load the legacy module.
My script:
require([..., "agsjs/dijit/TOC","dojo/domReady!"],
function(..., TOC) {
on(map,'layers-add-result',function(results){
//Add Legend
var toc = new TOC({
map: map,
layerInfos:legendLayers
}, 'legendDiv');
toc.startup();
});
});
The first line of code of the module:
dojo.provide('agsjs.dijit.TOC');
Everything works until the loader tries to load the agsjs/dijit/TOC module, where I get a "dojo.provide is not a function" error. How do I solve this without having to refactor the entire module to AMD? Thanks
In order for legacy modules to load, you need to run the loader in legacy mode, which means you cannot set async: true. As long as you are running with async: false (the default), you will be able to load and use legacy modules from AMD modules, and vice-versa.
A good point of AMD is that you don't have to use "dojo" and "dijit" global variables now. If you don't want change all those dojo.xxx calls in your old modules, you may try to wrap you old module in a
define([
"dojo/_base/declare",
"dojo", "dijit",
...
], function(declare, dojo, dijit) {
return declare([/*your parent widgets*/], {
//your old module content at here, maybe you need make little modifications of your old module
});
});
So that those dojo.xxx functions may still works.
This link may provide everything you need:
http://dojotoolkit.org/reference-guide/1.9/releasenotes/migration-17.html
I'm a beginner to dojo toolkit. And I know that dojo.byId() function is similar to JavaScript's document.getElementById() but I don't understand what's the use of dom.byId().
Can someone explain me what are the differences between dom.byId() and dojo.byId()?
The dojo syntax is pre AMD using the global dojo object. The dom syntax is when you load the dojo/dom module with the new AMD structure.
Edit
I suppose I should add an example.
// Pre-AMD (<1.7)
dojo.ready(function(){
var elm = dojo.byId('myElement'); // id="myElement"
})
// Dojo using AMD (1.7+)
require(['dojo/dom', 'dojo/domReady!'], function(dom){
var elm = dom.byId('myElement');
})
Dojo and AMD is tricky to get used to, at least it was for me.
More on AMD from RequireJS
In my Dojo build, I'm pulling in some third party libraries.
As I go through the build process, I'm getting errors due to ReferenceErrors.
This is fine. This makes sense.
However, I'd like to tell the Dojo build process about the things that are being referenced. In essence, this would be akin to passing externs to the Closure Compliler.
Thus, my question: How do I tell the Dojo build process about references that it cannot infer from my code base?
This is using Dojo 1.8
I just ran into this myself. Now I'm assuming that the ReferenceErrors you referred to are for browser objects like navigator, window, document, and the like. If so, then this is a problem introduced by the Dojo build process itself, because the build is performed by dojo.js running inside of Rhino where browser global objects are not defined. It's a dojo/Rhino error, not a closure compiler error, so there's nothing you can pass to closure to change this. For example, a script like
(function(){
window.alert("hello");
})();
will break your dojo build if it is included in a dojo layer. When the dojo AMD loader resolves the dependency of a script like the above, it will run the body of the function, resulting in a ReferenceError because window does not exist in Rhino.
To get around this, wrap the script as an AMD module
define([], function(){
window.alert("hello");
});
and then the function body will NOT be executed by the AMD loader during dojo build.
I want to run Dojo/Dijit with the Google CDN:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js">
</script>
I've tried 1.3.2, 1.3, 1.2 and all give this same problem.
If what I've read is true, I only need to include the dojo.xd.js - then the requires will properly find dijit somehow relative to dojo.
In Firebug I see the following:
http://ajax.googleapis.com/ajax/libs/dojo/1.2/dijit/Menu.js
200 OK
I'm confused by this, because I if http status=200 is okay - then why is this line showing up in red?
The next line says
could not load 'dijit.Menu'; last
tried '../dijit/Menu.js'
I had this working with all the Dojo/Dijit source code local - but I'm determined to get it running with the CDN.
I did some searches, and the best I could find was that Menu.js was included in certain releases, but I think they were talking 1.2 or before.
Same error occurs in the Chrome browser.
Thanks for helping.
Neal Walters
More Info Added:
Thanks for the example. I took it and got a simple menu working:
http://3wcloud-com-provisioning-qa.appspot.com/testDijitMenuOnly
Here's the "beast" that I'm trying to get working.
http://3wcloud-com-provisioning-qa.appspot.com/testDijit
This was originally a copy of the Dojo Theme demo - and it was working when I was running with Dojo local. It does a delayed/manual parse.
Like I said above, I tried 1.2, 1.3, 1.3.2 and so on, so it was just a matter of timing when I copyied/pasted into my question.
And OOPS - I didn't have djconfig - so I added that - but similar problem - just more explicit paths.
Thanks again - I'm going to love Dojo when I over these little humps.
This is the page I'm trying to reproduce:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html?theme=soria
Do you have something strange in your djConfig? The fact that it's spitting out "../dijit/Menu.js" makes it seem like you have a path setting in there.
I set up a simple demo page that uses the Google CDN and does:
dojo.require('dijit.Menu')
without problem.
Also, the script tag has 1.3.2 but it's loading menu from 1.2 which is strange.
Post a the full source code of what isn't working and that'll help track down the problem.
EDIT AFTER POSTING LINK
Remove these lines from your testDijit page:
<script type="text/javascript" src="/dijit/dijit.js"></script>
<script type="text/javascript" src="/dijit/dijit-all.js" charset="utf-8"></script>
YET ANOTHER EDIT
Call me crazy (since you don't seem to approve or upvote answers on SO making this a kind of no-op for me) but I got it working with the CDN here.. It still has problems because the CDN doesn't have all the test files on it (dijitTest.css and countries.json for example). You can download it and do a diff on your ow file to see what I changed. I mostly added a bunch of missing requires and changed paths to CSS and images. You also have a script tag referencing /dojo.js in your file.
I'm curious why you are so driven on getting the dijit tester running on your app since it seems like it'd be more fun/productive to learn dojo solving problems within your application.