Jquery / Dojo - How Do I Use Jquery With Dojo Toolkit

April 21, 2024 Post a Comment

How do I use jQuery with Dojo toolkit? I've heard of both libraries being used simultaneously, jQuery for DOM-related and Dojo for UI (dijit), but I can't find any tutorials or exa

Solution 1:

You can use jQuery by pulling it into your app via a script tag in the head of your website, there will be no conflicts with dojo.

However something to keep in mind when using jQuery with dojo, especially with dojo version 1.8 and its full AMD support. It is cleaner (especially if you can't pull in jQuery in the head of your website) to take advantage of AMD (asynchronous module definition). You will need to make a package entry within the dojo config script to correctly pull in the framework. Here is an example that uses a library location for jquery and jquery-ui...

<!-- external library configuration code included in header to make sure this
    is loaded before code in body--><!-- dojo config --><script>/* Instead of using the inline dojo-config attribute
            * create this variable so we can configure dojo here.
            * This seems a little clearer, easier to read as a config.
            */var dojoConfig = {
                baseUrl: "./",
                async: true,
                isDebug: true,
                parseOnLoad: false,//false to allow for us to call this independantly in js later on//here are the packages dojo will be aware of and related js filespackages: [
                    //dojo specific packages
                    {name: "dojo", location: "libs/dojo"},
                    {name: "dijit", location: "libs/dijit"},
                    {name: "dojox", location: "libs/dojox"},
                    {name: "jquery", location: "libs/jquery", main: "jquery-1.8.2"},
                    {name: "jqueryui", location: "libs/jquery", main: "jquery-ui-1.9.1"},
                ]

            };


    </script>

My folder structure just has a libs folder at the root, which is why I have "./" for the base url, but you could just as easily pull from a cdn location.

Without this config entry jQuery will not function as expected, and you may end up getting "is not a function" errors popping up in the console.

If you do put a separate script tag in to pull in jQuery or other third party framework and also use AMD to do the same, you'll just end up pulling it in a second time when you require it for dojo for the first time.

Solution 2:

You can use them beside each other with no issues because Dojo does not override $ like some other javascript libraries.

Solution 3:

You can use Dojo's AMD loader to load jQuery.

The following snippet even aliases $ to dojo.query and still uses jQuery without conflict (I don't recommend it, though!):

  define.amd.jQuery = true;

  require(["jquery", "dojo/query", "dojo/NodeList-dom"],
  function(jquery, $) {
    $("output").style("visibility", "visible");     // using Dojojquery("#output").css("visibility", "hidden");  // using jQuery
  });

Full explanation and source code: Loading jQuery with Dojo 1.7 AMD loader

Solution 4:

You can namespace jQuery, for example, in order to avoid conflicts.

check http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Solution 5:

jQuery supports AMD for quite a while now.

You can use the "paths" property of your ADM config to tell your AMD loader where to find jQuery :

varamdconfig= {
  baseUrl:__AMD_CONFIG_BASE_URL__,
  packages: [
    {name:"dojo", location:"./lib/dojo"},
    {name:"app", location:"./app"}
  ],
  paths: {
    jquery:"./lib/jquery/jquery-1.12.4"
  }
};

Then, you can import jQuery into your ADM modules the same way you import any other AMD module, and use it alongside your Dojo modules:

define([
  "dojo/dom",
  "jquery"
], function(
  dom,
  $
) {
  
  ...

});

Note

You can use the same config for AMD projects that use RequireJS instead of Dojo :

if (require.config) {
  // RequireJSrequire.config(amdconfig);
} else {
  // Dojorequire(amdconfig);
}

JavaScript Sample