Loading jQuery with Dojo 1.7 AMD loader
ChristopheJolif 2700024FBY Comments (2) Visits (23095)
Before diving into the technical details of this, if you are not familiar with AMD I encourage you to read this introduction to AMD.
Let's first see how you load Dojo 1.7 and some of its modules using AMD.
For that you include the following tag in your web page:
Here in order to simplify the example I have referenced Dojo on the Google CDN, however nothing prevents you from hosting your own Dojo version and referencing it.
Once this is done any subsequent script tag in your web page will have access to the Dojo loader.
In order to load several Dojo modules you just need to leverage the require function. In the following example we are loading the Dojo query module and the DOM manipulation module as well as using them to modify the visibility of a DOM node:
The first parameter of require is the array of modules we want to load, the second one being a callback function called once all the modules have been loaded. Each parameter of the function corresponds to a reference to each loaded module. You can give whatever name to the reference you want to and no global reference is supposed to be created allowing several modules to be loaded without any of theme stepping on each other. Note that in this example we aliased the query module of Dojo to the usual $ alias of jQuery and we will see in the next example that it does not cause issues.
In order to load jQuery in addition to Dojo modules we need to tell the Dojo AMD loader where to find the jQuery module. One more time we can either configure it to find it locally or on a CDN. To be consistent with where we loaded Dojo let's load jQuery from Google CDN as well.
For that we first need to decorate the script tag loading Dojo with the correct configuration on where to find jQuery. This is done using the package property in the data-dojo-config attribute as follows:
The second step is to modify our source code to add the actual loading of jQuery through the require function:
As you can see we now have dojo/query module aliased to $ and jQuery module aliased to jquery without any conflict.
Note that we had to set the define.amd.jQuery flag to true in order for Dojo loader to be able to load jQuery. Indeed there is specific protection in jQuery code that prevents jQuery from being loaded by loaders that do not support the loading of multiple releases of jQuery in a single page. However as in our case we control the web page and we know we will only load one we can set that flag to override that protection. Note that if you need to load both Dojo and several jQuery versions on the same page you can, for example, use a 3rd party alternate AMD loader like RequireJS.
Obviously in a real life application you won't probably load the two libraries to achieve the same task (i.e. doing DOM queries and manipulations). So you will be loading different modules. The following example shows you how you can use jQuery to query your DOM and use Dojo to display a chart widge both being loaded using Dojo AMD loader:
Finally if you are interested in knowing more about Dojo AMD loader you can find a detailed documentation in Dojo reference guide.