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:


    sample_app
    




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:


require.config({
    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)
{
    App.initialize();
});

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!

47 comments:

  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

    ReplyDelete
  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

    ReplyDelete

  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

    ReplyDelete
  4. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in JQUERY
    , kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on JQUERY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com



    ReplyDelete
  5. Online mba in India
    DEIEDU is the best online Institute in the world with high class course outline and up to date learning materials. DEIEDU is providing the online mba in india, online mba in india, Distance learning mba courses in india, Correspondence mba in India Mba from distance in India, Online Executive Mba in India, distance Mba from India, Online distance mba in India. Distance learning mba degree in India.
    Address:
    401, fourth floor sg alpha tower
    Vashundhra (up)
    Phone: 9811210788
    Email: info@deiedu.in
    Website: http://www.deiedu.in/
    online mba in india

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Thank you. Truly appreciate all your hardwork, especially your down-to-earth attitude. Also Visit this site for jQuery Certification

    ReplyDelete
  9. Nice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision..... Best software Training institute in Bangalore

    ReplyDelete
  10. Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

    DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

    Good to learn about DevOps at this time.


    devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai | trending technologies list 2018

    ReplyDelete

  11. Nice post. It is very useful and informative post.

    CEH Training In Hyderbad

    ReplyDelete
  12. Thank you for sharing such great information very useful to us.
    Python Training in Gurgaon

    ReplyDelete
  13. Amazing web journal I visit this blog it's extremely marvelous. Interestingly, in this blog content composed plainly and reasonable. The substance of data is educational.
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  14. Thanks for sharing this valuable information and we collected some information from this blog.
    Machine Learning Training in Gurgaon

    ReplyDelete
  15. Thank you for sharing such great information very useful to us.
    hire dedicated developers

    ReplyDelete
  16. Hello,
    Nice article… very useful
    thanks for sharing the information.
    servicenow demo

    ReplyDelete
  17. Hello,
    Nice article… very useful
    thanks for sharing the information.
    servicenow certification

    ReplyDelete
  18. An amazing web journal I visit this blog, it's unbelievably wonderful. Oddly, in this blog's content made without a doubt and reasonable. The substance of data is informative.
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training
    oracle Fusion Technical online training

    ReplyDelete
  19. Excellent blog I visit this blog it's really awesome. The important thing is that in this blog content written clearly and understandable. The content of information is very informative.
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  20. Thanks For Sharing The Information The Information Shared Is Very Valuable Please Keep Updating Us Time Just Went On Reading The article Python Online Course Hadoop Online Course Aws Online Course Data Science Online Course

    ReplyDelete
  21. I love this post.


    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสมาชิกที่นี่ >>> Gclub online

    ReplyDelete
  22. Very cool!

    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา สมัคร Gclub Royal1688
    และยังมีเกมส์สล็อตออนไลน์ 1688 slot อีกมากมายให้คุณได้ลอง
    สมัครสมาชิกที่นี่ >>> Gclub Royal1688

    ReplyDelete
  23. A bewildering web journal I visit this blog, it's unfathomably heavenly. Oddly, in this present blog's substance made purpose of actuality and reasonable. The substance of data is informative
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  24. A bewildering web journal I visit this blog, it's unfathomably heavenly. Oddly, in this present blog's substance made purpose of actuality and reasonable. The substance of data is informative
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  25. Here we are offering some diiferent courses and cloud computing is one of them . So come and join this course and make your carrer bright. For more Information just click on the mentioned link anf get the other details of the course.
    Cloud Computing Course in Delhi

    ReplyDelete
  26. Nice article, interesting to read…
    Thanks for sharing the useful information
    pega certification

    ReplyDelete
  27. Just now I read your blog, it is very helpful nd looking very nice and useful information.
    Digital Marketing Online Training
    Servicenow Online Training
    EDI Online Training

    ReplyDelete
  28. Thanks For Sharing this Post.
    Interested In Python!!
    Click here for the Best Python Training Institute in Gurgaon
    https://www.acil.in/python-training-in-gurgaon/

    ReplyDelete
  29. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  30. Download latest audio and video file fromvidmate

    ReplyDelete