I hope someone will benefit from this guide, and save a lot more time than I did 🙂

Ok, so once I had to use the fantastic jQuery UI plugin for jQuery in a Drupal 6 project, I had a hell of a time getting it to work. Eventually I did it with the help of information from three different web pages. This guide will tell you everything you need to do in order to get jQuery UI working in Drupal:

  1. Install the jQuery Update Drupal module (You need jQuery version 1.3+ for jQuery UI, which doesn’t come standard in Drupal 6)
  2. Install the jQuery UI Drupal module
  3. Create a folder named ‘jquery.ui’ in the ‘jQuery UI’ module folder ([your_drupal_directory]/sites/all/modules/jquery_ui/)
  4. Download jQuery UI 1.7.3 (NOTE: Not the latest version!) from the jQuery UI home page via this link or, if that doesnt work, my mirror of it
  5. Unzip the jQuery UI you just downloaded
  6. Upload/Copy everything from ‘jquery-ui-1.7.3.custom/development-bundle’ to ‘/sites/all/modules/jquery_ui/jquery.ui’
    Your ‘jquery.ui’ folder sohuld now contain the following files/folders:
    AUTHORS.txt
    demos
    docs
    external
    GPL-LICENSE.txt
    jquery-1.3.2.js
    MIT-LICENSE.txt
    themes
    ui
    version.txt
  7. Your ui folder should now contain two folder and a whole lot of *.js files
  8. Upload/Copy ‘jquery-ui-1.7.3.custom/css’ to ‘jquery.ui/css’ (So copy/upload the entire css folder)
  9. Now, go to your theme folder (/sites/all/themes/[your_theme_name]) (the themes can also reside in your site directory, but ‘all’ is more common)
    In your theme folder, locate the file ‘template.php’. In this file, add these three lines anywhere outside any of the functions (I added them right after the comments in the top of the file):
    drupal_add_js('sites/all/modules/jquery_ui/jquery.ui/js/jquery-ui-1.7.3.custom.min.js');
    drupal_add_js('sites/all/modules/jquery_ui/jquery.ui/ui/ui.core.js');
    drupal_add_css('sites/all/modules/jquery_ui/jquery.ui/themes/base/ui.all.css');
  10. Now, your jQuery UI is ready to play nice with Drupal! (NOTE: A word of warning: Remember you have the 1.7.3 version of jquery UI, not the latest, so find the documentation for your version in your downloaded development-bundle/docs folder.
  11. Test your new jquery ui out:
    – Add this line to your page.tpl.php file’s <body> section:
    <div type=”text” id=”datepicker”></div>
    – And add this line to your drupal-specific document.ready function:
    $(“#datepicker”).datepicker();
  12. You should now see a datepicker nice and cute on your drupal front page.

If you found this post useful, please consider helping me by liking www.betternow.org on Facebook and by doing so help me in my work to support charity.