Inject Dojo 1.9.1, then use AMD
This fiddle will dynamically inject Dojo and after it's loaded, programmatically build a UI. Using: "onDomReady" works.
by b_long
HTML
<body class="claro">
<div class="claro">
<h3>This fiddle will dynamically inject Dojo and after it's loaded, programmatically build a UI. We're relying on jQuery for promises and using jsFiddle's built-in "onDomReady" handling <!-- Reference: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions -->.</h3>
<button id="welcomeButtonNode" type="button">
<!-- Optional text -->Print "Hello World"</button>
<br/>
<div id="welcomeMsgBoard"></div>
<button id="dialogMaker" type="button">Show a dialog</button>
<div id="myDialogLocation"></div>
</div>
</body>
JavaScript
var
// Reference to the head element
theHead = document.getElementsByTagName("head")[0],
// Dojo Url Strings, etc.
// Don't change these...
regularDojoBaseUrl = "http://ajax.googleapis.com/ajax/libs/dojo/1.9.1",
dojoBaseUrl = "//ajax.googleapis.com/ajax/libs/dojo/1.9.1",
// You can change these
dojoJsDebugUrl = regularDojoBaseUrl + "/dojo/dojo.js.uncompressed.js",
dojoJsUrl = regularDojoBaseUrl + "/dojo/dojo.js",
dijitJsUrl = regularDojoBaseUrl + "/dijit/dijit.js",
// Configure Dojo before injecting the 'script' tag
// Alternatively we can use a "data-dojo-config" property on the 'script' element for Dojo
dojoConfig = {
async: true,
afterOnLoad: true,
// baseUrl: regularDojoBaseUrl, //+ "dojo",
parseOnLoad: true,
debug: true,
cacheBust: true
};
djConfig = dojoConfig;
function oldSchoolInjectCss(cssFileUrl) {
var link = document.createElement("link");
link.href = cssFileUrl;
link.type = "text/css";
link.rel = "stylesheet";
theHead.appendChild(link);
}
function oldSchoolInjectJs(jsFile) {
return $.Deferred(function (dfd) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = jsFile;
scriptElement.onload = function () {
console.log(jsFile + " is now loaded!");
dfd.resolve();
}
theHead.appendChild(scriptElement);
}).promise();
}
function loadCss() {
oldSchoolInjectCss(regularDojoBaseUrl + "/dojo/resources/dojo.css");
oldSchoolInjectCss(regularDojoBaseUrl + "/dijit/themes/claro/claro.css");
console.log("Finished loading CSS");
}
// Build the UI programmatically
function dojoMakeStuff(dom, Button, Dialog, kernel) {
console.log("Now building dojo UI");
var myButton = new Button({
label: "Click me!",
onClick: function () {
// Do something:
...