Login Register

How to dynamically load dojo.js

Hi,
I am new to Dojo and started with the Hello World tutorial. This all works fine but now I thought I would try to apply Dojo to my web pages dynamically. So I want to load dojo.js dynamically.

So I'm loading some Dojo CSS files and the Dojo Javascript library:

var html_doc = document.getElementsByTagName('head').item(0);

            css1=document.createElement("link")
            css1.setAttribute("rel", "stylesheet");
            css1.setAttribute("type", "text/css");
            css1.setAttribute("href", 'dojoroot/dijit/themes/tundra/tundra.css');
            html_doc.appendChild(css1);

            css2=document.createElement("link")
            css2.setAttribute("rel", "stylesheet");
            css2.setAttribute("type", "text/css");
            css2.setAttribute("href", 'dojoroot/dojo/resources/dojo.css');
            html_doc.appendChild(css2);

            var js = document.createElement('script');
            js.setAttribute('language', 'javascript');
            js.setAttribute('type', 'text/javascript');
            js.setAttribute('src', 'dojoroot/dojo/dojo.js');
            js.setAttribute('djConfig', 'parseOnLoad: true');
            html_doc.appendChild(js);

This all seems to work fine.
Of course I cannot use the dojo.js until it is loaded. So I'm using a timeout to create widgets only after the library is loaded. After the library loads I want to create a button similar to the hello world example.

dojo.require("dojo.widget.Button");
            var html_doc = document.getElementsByTagName('body').item(0);
            html_doc.setAttribute('class', 'tundra');

            var button = document.createElement('button');
            button.setAttribute('dojoType', 'dijit.form.Button');
            button.setAttribute('id', 'helloButton');
            button.appendChild(document.createTextNode("Click me!"));
            html_doc.appendChild(button);
            
            dojo.widget.createWidget(button);

The dojo.require causes an error message. In the console I see the following error message:
Fout: Could not load 'dojo.widget.Button'; last tried './widget/Button.js'
Regel: 565

Other widgets produce a similar error message. The button.js file does a exist but not in the searched location. It exists in dojoroot\dijit\form.

Any ideas why this library cannot be found?

Thanks and Regards,
Onno

Your require statement

Your require statement should be 'dojo.require("dijit.form.Button")' not 'dojo.widget.Button'. Also you might want to check out how to programmatically create widgets, see http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-.... it'll save you from creating markup as you do currently.

timeout

So I'm using a timeout to create widgets only after the library is loaded.

you shouldn't need to - <script> tags are loaded synchronously, so just load the base dojo.js then you can do dojo.require() and create your widgets like normal - you shouldn't even need to do dojo.addOnLoad() since the page will have loaded already.

I can see where this code

I can see where this code may not work, since this code may run after the page loads, so our triggers for knowing "page loaded" may not fire in all browser cases. I want to support this use case though. I'll be tracking it in this trac ticket:
http://trac.dojotoolkit.org/ticket/5432

More documentation?

This documentation is useful but is there more?

I have been using snippets I found on the internet but they seem to be outdated.

Once that trac ticket is

Once that trac ticket is fixed, then we'll have a better idea how to document the approach. The fix will only be in Dojo 1.1 and later though (given the current milestone for the trac ticket).