jQuery / Dojo - How do I use jQuery with Dojo toolkit

Question

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 examples of this. Will I run into any conflicts or issues if I load both libraries?

Answer 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 files
                packages: [
                    //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.