Geek Answers Handbook

Download Dojo from CDN with jQuery

Here is an example that I took from the article and changed a bit. This example works great

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen"> <script type="text/javascript"> dojoConfig = { parseOnLoad: false, async: true }; </script> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" type="text/javascript"></script> <script type="text/javascript"> /// Require the registry, parser, Dialog, and wait for domReady require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) { // Explicitly parse the page parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo.config is dialog.set("content", "<b>it works!</b>"); // Show the dialog dialog.show(); }); </script> </head> <body class="claro"> <div id="dialog" data-dojo-type="dijit.Dialog"></div> </body> </html>

Now I want to change it and load Dojo dynamically using jQuery. Here is an example of how I do it:

 <!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { dojoConfig = { parseOnLoad: false, async: true }; $.getScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js") .done(function (script, textStatus) { /// Require the registry, parser, Dialog, and wait for domReady require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) { // Explicitly parse the page parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo.config is dialog.set("content", "<b>it works!</b>"); // Show the dialog dialog.show(); }); }) .fail(function (jqxhr, settings, exception) { alert('Cannot load Dojo.js'); }); }); </script> </head> <body class="claro"> <div id="dialog" data-dojo-type="dijit.Dialog"> </div> </body> </html>

but it looks like I'm doing something wrong, because it causes the following error.

 NotFoundError: Node was not found http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js Line 2

I suspect that Dojo is not ready yet, but maybe I'm wrong ... Is it possible to use jQuery to dynamically load Dojo?

+4
source share
2 answers

OK, finally it looks like I found a reliable solution based on an article ... here is a working example:

 <!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function () { callback(); }; } script.src = url; document.body.appendChild(script); } $(document).ready(function () { dojoConfig = { parseOnLoad: false, async: true }; loadScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js", function () { /// Require the registry, parser, Dialog, and wait for domReady require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) { // Explicitly parse the page parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo.config is dialog.set("content", "<b>it works!</b>"); // Show the dialog dialog.show(); }); }); }); </script> </head> <body class="claro"> <div id="dialog" data-dojo-type="dijit.Dialog"> </div> </body> </html>

This is not a pure jQuery solution, but for me is better than the Dojo script on the page ...

0
source

The "Node not found" error was caused by the loader trying to find the script tag that loaded it. This is the trick Dojo uses when it boots from a CDN (like the Google you used) to try and find the URL for loading the modules.

The jQuery $ .getScript () function does not actually enter the script tag on the page, but rather loads through XHR and then removes the code. Therefore, the tag that Dojo is looking for cannot be found. This only happens when using CDN. If you used your own local copy of Dojo, not a CDN, it can be made to work.

I'm not sure if loading Dojo through jQuery is good practice. Most likely, it is better to download them separately or do it the other way around (i.e. load jQuery inside Dojo). I assume that you need the functionality of both, or you would not try to do it.

To load jQuery as a Dojo module, you can modify your code as follows:

 <!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen" /> <script type="text/javascript"> var dojoConfig = { "parseOnLoad": false, "async": true, "packages": [{ "name": "jquery", "location": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0", "main": "jquery.min" }] }; </script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" ></script> <script type="text/javascript"> define.amd.jQuery = true; // jQuery will be loaded as an AMD module require([ "jquery", ], function($){ // NB: $ is only available within the scope it has been loaded // as it is loading as an AMD module. Hence, $ is not globally // available and must be required into any scope it is used. $(document).ready(function () { require([ "dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog" ], function (registry, parser, JSON, config) { // Explicitly parse the page parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo.config is dialog.set("content", "<b>it works!</b>"); // Show the dialog dialog.show(); }); }); }) </script> </head> <body class="claro"> <div id="dialog" data-dojo-type="dijit/Dialog"> </div> </body> </html>

It is probably best to stick with Dojo instead of trying to use both. However, the foregoing will allow the use of both methods. Dojo has its own function ( dojo / ready ), which can replace $ (document) .ready (). Most jQuery functions are replicated to some Dojo manor.

Downloading jQuery as a Dojo module means that it is only available inside the required callback. Therefore, $ does not fit into the global scope, as is usually the case. You will need to require it in any JavaScript that you need.

NB: I changed dijit.Dialog in your code to dijit / Dialog, since it will not load in version 1.8 if you use point formation.

+1
source

More articles:


All Articles