Monday, July 8, 2013

Load jQuery UI with requireJS

RequireJS is one popular script loading framework out on the web. At the same time, most of the web applications and websites are now using jQuery and there are quiet a lot of them that use jQuery UI as well. You may know that jQuery UI is dependent on jQuery, meaning that in order for jQuery UI to load correctly, jQuery should be loaded first.

In older version of RequireJS, it was a lot more harder (and ugglier you may say) to include jQuery UI since the jQuery UI library (unlike jQuery) is not following an  Asynchronous Module Definition  (AMD) style. Then you need to include AMD-enabled scripts which were built within communities and especially James Burke. However, in the last versions of RequireJS, a lot of features were added regarding this.

Remark: If you are not familiar with Asynchronous Module Definition (AMD) and interested to know more, read this article Why AMD?

So let's get on with it. I presume that you are following a folder structure like this:

Here is how you minimal index.html file should look like:


One of the scripts that handles a lot of key information is the one attributed with data-main (i.e. main which stands for main.js). In this script you can define your library paths and a tag called shim which handles dependencies and non-AMD module loading. After that there is the code on how application will continue its initialisation process. This looks something like:

    paths: {
        "jQuery": "../libs/jQuery//jquery-1.9.1",
        "jQueryUI": "../libs/jQueryUI/jquery-ui-1.10.3.custom"
    shim: {
        "jQueryUI": {
            export:"$" ,
            deps: ['jQuery']

require(["app"], function(App)

As you can see with the paths you are declaring a key-value pair of library conventions and paths and with shim, you are flagging the non-AMD modules which in this case is also dependes on jQuery. In the last step, add the following to your app.js file:

define(["jQuery", "jQueryUI", "guiFunctions"], function ()
   var initialize = function ()
      //jQuery, jQuery UI are added here now ...
   return {
      initialize : initialize
And that is it!


  1. Wow. This really made my day. Thanks a lot!
    JQuery Training JQuery Training Javascript JQuery Online Training

    JQuery Online Training JQuery Online Training Javascript Online Training JQuery Training

    JavaScript Training Courses

  2. Croma campus is best IT training institute and best class IT trainer provides croma campus is great jquery training in noida wiht jo b placement support. croma campus best facilities and lab provides then best option for you join us croma campus


  3. As we heared more and more tips which enable us for writing for the content. But with this especially how the authoritative really nice. I agree with your 3 point include with more images and codings. It will enable the readers without any confused or any other thing and finally cleared with what we are going to school signs uktell.official website