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:
- Install the jQuery Update Drupal module (You need jQuery version 1.3+ for jQuery UI, which doesn’t come standard in Drupal 6)
- Install the jQuery UI Drupal module
- Create a folder named ‘jquery.ui’ in the ‘jQuery UI’ module folder ([your_drupal_directory]/sites/all/modules/jquery_ui/)
- 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
- Unzip the jQuery UI you just downloaded
- 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 - Your ui folder should now contain two folder and a whole lot of *.js files
- Upload/Copy ‘jquery-ui-1.7.3.custom/css’ to ‘jquery.ui/css’ (So copy/upload the entire css folder)
- 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'); - 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.
- 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(); - 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.
Erich Riesenberg
August 19, 2010 at 13:24
Thanks for this.
Is jQuery version 1.3+ installed separately, or is it included in one of the modules?
Imagine some of us know nothing about jQuery, what it does or why we need it…
I just want the Date module to work…
Thank you!
Houen
August 19, 2010 at 18:10
You’re very welcome -
jQuery 1.3+ is automatically installed when you install the jQuery Update module.
ignivome
August 19, 2010 at 17:16
The link at #4 is broken
Houen
August 19, 2010 at 17:35
Link fixed – thx for the heads up! I also added a mirror of my own now that I was at it, so it wont be unusable if they take it down.
Erich Riesenberg
August 20, 2010 at 01:44
Thanks. I did it and did not get any error messages. This is the strangest module for me yet.
There is one error I keep getting. I have two sites, one working site and one development site.
The problem is with the Date module. I have a monthly calendar and when I update with this jquery and Date all the dates disapper. I flushed the caches and no result. I ran update.php
This is the old calendar:
http://fuzzyaccounting.com/calendar-date/2010-08
And this is the new: http://www.missingpups.org/calendar-date/2010-08
I am sorry I have tried updating this perhaps five times and it takes an hour or so each time and I do not know what I need to change. I am new to drupal in the past couple months but this is the first real crazy problem. I am not doing anything custom, all standard modules.
I will post on drupal.org also but any comments appreciated….
Thank you.
Erich Riesenberg
August 20, 2010 at 12:19
I think the problem is with the Calendar / Date modules. It is a common problem.
http://drupal.org/node/580178
Lionel
August 28, 2010 at 23:48
Thank you, thank you, thank you. Trying to implement the Popup Date feature has been driving me crazy all f+ing day.
maineguide
September 4, 2010 at 19:57
Thank you for putting the directions all in one place and explaining it so well. This has been a frustrating and time consuming module to install. No error messages after following your instructions.
Havard
September 8, 2010 at 07:57
Thanks for your guide, saved me a lot of pain.
However in #8, I had to nane the css-folder “themes” instead of “css”, as so the drupal_add_css-path says so.
Houen
September 8, 2010 at 14:32
That’s another way to do it, i guess. You shouldn’t have to do this, though, as this css folder is only used by jquery internally. But if it works, it works…
Gus
September 19, 2010 at 06:18
Errr…. The drupal module JQuery Update comes with JQuery 1.2.3 not 1.3.2. which doesn’t seem to work with the Views UI. ..or am I smoking crack?
Houen
September 19, 2010 at 11:40
I dont know if youre smoking, but I’ve used Views UI just fine after installing jQuery Update. Try sifting through the latest release notes for both module, and search their issue queues for others with the same problem.
Tom Steenhuysen
September 23, 2010 at 22:51
Fantastic post Houen!
I’ve followed your steps through to step 6 – but in step 7 I am confused. Doesn’t step 6 create the same copy of everything in ‘ui’ ?
Also, Drupal isn’t complaining anymore and everything seems to be working… Maybe one of the module updates automated something?
Helpful info:
Drupal 6.19
Mysql: 5.1.48 Php 5.2.14
jQuery UI: 1.7.3
jQuery Update: 1.2.6
Houen
September 23, 2010 at 22:57
Thank you
Super if it works without trouble now, and you’re right about step 7 – I’ve removed it and just kept the check for ,js files. Thanks for the notice!
angel gimenez
October 6, 2010 at 00:47
Hey. Great guide first of all. Thanks for it, I was losin so many hours on it.
Now I wanted to try some of the widgets but I don’t really understand how to. That would be step 11. I can perfectly ad the to the php file but the other part with the JS is where Im stuck. Can you elaborate a bit more on it for me please ? Im tryin on a newly installed drupal 6.19 and followed this very same guide so I should have the same versions of jquery ui.
Im using the Garland theme just for testing. Thanks in advance for reading
Best regards,
Houen
October 6, 2010 at 02:02
Sure thing: The JS files in template.php that I mention in step 9, is so Drupal will actually load the jquery ui js files.
I would test it out on a common, but non-core theme, as Garland for example has a tendency to do things a little differently than most themes, and even if you override it, you cant really be sure where it gets its files from. (You certanly dont want to edit the one in the core)
My suggestion is to try it out on for example Aquia Marina instead.
The clean cut is that if you follwo all the steps, and have those three lines in the top of template.php (/sites/all/themes/[your theme]/template.php) in your theme folder, the date popup should work.
Meaghan
October 13, 2010 at 00:28
Hello! I have been getting that annoying little error for a while now. Thanks for helping me solve the datepicker issue (and whatever else this will have saved me time on, tonnes I’m sure)!
Kohrye
October 14, 2010 at 20:09
Seriously this was perfect. Thank you so much!
Houen
October 14, 2010 at 20:17
Thanks
glad to help
JoelMMCC
October 15, 2010 at 07:05
Do the “docs” and “demos” folders really need to be copied over to the deployed Drupal site? That seems like a waste of space, FTP time, and potential security risk (the URLs to the demo files wouldn’t be hard for any Drupal-savvy hacker to figure out).
Are there any dependencies to the demos, let alone the docs?
Houen
October 18, 2010 at 10:12
No, the docs and demos do not need to be copied over, but they are not a security risk. Keep in mind that this post was designed to be the easisest way to get jquery UI working on Drupal – not the slimmest. There is no security risk from having the demos available, as jquery UI is purely javascript, not php, and so any hole (I have not heard of any) exploitable by having the jquery UI demos exposed is just as easily exploitable without them.
Jay
October 29, 2010 at 03:42
Thanks for the tutorial. I am trying to incoporate jQuery UI to the id-facta theme, which does not have a template.php file within the theme.
Instead it has
comment.tpl.php
page.tpl.php
block.tpl.php
node.tpl.php
I am trying to figure out where to paste these three lines:
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
Do you have any suggestions about how to get jQuery to work on “fringe” themes that are set up a little differently?
Houen
October 29, 2010 at 21:44
Without know ing your theme, if it uses the PHPTemplate theme engine, that is built into Drupal and many themes use, you should be home safe by simply creating the template.php file inside your theme folder (or copying it from the core files if creating it breaks your theme
nano
March 18, 2011 at 21:21
you can also use this the follow line to add jquery Ui functionality to you site if you alreay have jquery Ui iinstalled:
jquery_ui_add(array(‘ui.draggable’, ‘ui.droppable’, ‘ui.sortable’));.
Whorish
October 26, 2010 at 21:46
This save me a lot of time. Specifically “Download jQuery UI 1.7.3 (NOTE: Not the latest version!) “
sctech
December 9, 2010 at 21:25
Thanks for posting this. I got carried away and wasted a couple of hours trying to move up to jquery ui v 1.8.x . I finally figured what a foolish idea it was and rolledback to 1.7.x.
Just a heads up I posted your link at http://drupal.org/node/986928#comment-3808716 to help other poor suckers out.
Running $().jquery in the firebug console helped verify that the jquery 1.7 lib was loading correctly. It required a cache reset for mine to work.
Thanks again for paying it forward.
Houen
December 9, 2010 at 22:23
Hi SCTech – Glad you got it to work, and good thing I could help you out
Hans
December 9, 2010 at 23:23
Hi Houen,
I’m noobish to this, so I don’t know were to find ‘jquery.ui/css’ in step 8 (Upload/Copy ‘jquery-ui-1.7.3.custom/css’ to ‘jquery.ui/css’ ).
Can you help me out.
Thanks,
Hans
Houen
December 10, 2010 at 00:23
Sure thing – when you first download the jquery ui package in step 4 and unzip it, the unzipped folder (called jquery-ui-1.7.3.custom) contains the following files/folders:
- css
- development-bundle
- index.html
- js
The css folder here is what you want.
Hans
December 10, 2010 at 01:07
your mirror (http://houen.net/perm/jquery-ui-1.7.3.custom.zip) returns a page not found
Houen
December 10, 2010 at 20:52
Thank you – it has been fixed
Hans
December 10, 2010 at 01:04
Figured it out; in step 3 I typed ‘jquery-ui’ instead of ‘jquery.ui’. So its working.
Just wondering now were, or how, to select a theme?
Houen
December 10, 2010 at 20:53
jQuery UI themes are created using their themeroller: http://jqueryui.com/themeroller/
Devin
December 17, 2010 at 19:15
Houen
Great to find this here— hope it’s rewarding to be of Service!
Question: The 1.7.3.custom creates the development bundle, css and js folders… We copy the CSS to the new jquery.ui folder. Why not also copy the JS folder over?
Why is it there if we don’t also migrate it over?
I have also had problems inserting the 3-lines of code into several themes now (German Newspaper, A3-Atlantis, couldn’t even find template.php for others) and get a white screen error with “Unknown/Unexpected Variable T or T_IF” at various lines… that are NOT the lines that included the inserted “drupal_add_*” lines of code. Any thoughts on what I’m not/doing?
Happy Holidays! Full Moon Eclipse on Solstice!
:~)
Houen
December 19, 2010 at 01:22
Hi Devin, glad you like it
I dont know why the JS folder doesnt need to be copied over… A guess could be that it is only jQuery, which is already in Drupal…
If the template.php file isnt there, it might mean that your template does not use the PHPTemplate template, that is the “standard” one in Drupal. Try creating it though, as it might just be missing. A theme doesnt need this file, but it allows php templates to be defined, and PHPTemplate will automatically load it (including the 3 lines)
waltWright
April 30, 2011 at 18:16
To Devin’s point,
For step 9, it seemed that the path was incorrect, because there is no “js” folder per your instructions (unless I missed a step).
I’m getting this error that I thought might be related:
warning: file_get_contents(sites/all/modules/jquery_ui/jquery.ui/js/jquery-ui-1.7.3.custom.min.js) [function.file-get-contents]: failed to open stream: No such file or directory in /home/projects/public_html/theatre2/includes/common.inc on line 2467.
I did try to change the path, but I’m still getting the error.
Thanks for the guidance.
ram
December 24, 2010 at 18:17
Thanks for your guide. Everything is OK but the datepicker is an inactive. I can’t select date.
Dimitris
December 30, 2010 at 16:27
Thanks a lot. You’ re a lifesaver!
Pekka
February 28, 2011 at 07:08
If you add this line:
drupal_add_js(‘sites/all/modules/jquery_ui/jquery.ui/js/jquery-ui-1.7.3.custom.min.js’)
to your template.php, at least file “1.7.3.custom.min.js’” should be in JS folder.
I got warnings until i copied JS folder from zipped jquery_ui, so it’s safer to keep that file in there for preventing error messages in some (rare?) cases.
Ana
January 27, 2011 at 03:23
Hi, Everything worked perfectly for me [thank you] . . . Until I went to: edit the calendar “block” in views and it gave me this warning:
“warning: file_get_contents(sites/all/modules/jquery_ui/jquery.ui/js/jquery-ui-1.7.3.custom.min.js) [function.file-get-contents]: failed to open stream: No such file or directory in /home/thewin11/public_html/includes/common.inc on line 2467.”
Total Newb so it might be something simple that is not clear to my technical understanding.
Thank you.
Houen
March 3, 2011 at 12:04
Hey
Sounds like you’re missing a file there. Try ensuring that everything has been copied correctly to the right places.
lleone
March 9, 2011 at 02:11
Dude! You are my freeging hero!!! Thank you for posting these instructions. I’ve already lost hours trying to get this plugin to work, but you saved me from losing many more I’m sure.
Houen
March 13, 2011 at 02:40
Glad to be of help
Kuba
April 6, 2011 at 15:51
Hi
My englisch is not so good.
I have a problem whit:
- And add this line to your drupal-specific document.ready function:
$(“#datepicker”).datepicker();
What is a drupal-specific document.ready function:
biglazy
March 24, 2011 at 12:39
Thank you very much!
With your help, the Date Popup module worked for me finally.
Kubasinsky
April 6, 2011 at 15:37
Sry, but my english is not good
I have problem whit this:
“- And add this line to your drupal-specific document.ready function:
$(“#datepicker”).datepicker();
And my question is: what is a “drupal-specific document.ready function:”
Help
John
April 14, 2011 at 23:42
My theme Fusion Bubblr does not seem to have a template.php file?
ssalive
April 23, 2011 at 01:27
I’ve followed these instructions exactly, except that I added the js directory to the jquery.ui directory as is mentioned in one of the posts. I’ve checked for the existence of all the other files that are specified in the three line “add”. I must be doing something wrong. When I add the three lines to the template.php file, and clear the cache, it breaks the page layout, as if it wasn’t reading any css at all. Any ideas?
Christopher Stevens
May 9, 2011 at 22:33
Oh! Thank you. I went through this pain before with jquery_ui. I truly appreciate your post, and the ability to find it easily!
Harvey
May 21, 2011 at 10:16
To get this working I had to change this line (mentioned above) -
drupal_add_js(‘sites/all/modules/jquery_ui/jquery.ui/js/jquery-ui-1.7.3.custom.min.js’);
into…
drupal_add_js(‘sites/all/modules/jquery_ui/jquery.ui/ui/jquery-ui-1.7.3.custom.min.js’);
[i.e. the "js" folder becomes "ui"]
…and suddenly I’m in the world of Sweaver!
Thanks for the instructions…
Jesus
May 27, 2011 at 21:07
Hey thank you its very useful, its really clear I understand all the time you spend looking for the solution
Chris Lounsbery
June 8, 2011 at 22:59
Where exactly do I install the jQuery Update?
Hitesh
June 11, 2011 at 06:55
This is really great tutorial you have prepared. Great great job. Thanks a lot.
mehdi jalali
June 28, 2011 at 22:14
How Do I use jformer in drupal 6?
http://www.jformer.com
Alex
July 2, 2011 at 12:51
I have having problem putting jQuery-ui Accordion and Lightbox on the same page.
I am using
Drupal 6.15 Jquery 1.3.2 Jquery-ui 1.7.2 Lightbox2 drupal module
The thing is… my lightbox works fine if I exclude the following line:-
drupal_add_js(‘sites/all/js/jquery-1.3.2.js’);
but if I exclude the above line, my accordion won’t work.
Kelvin Lee
July 17, 2011 at 07:26
Thanks for the post! It’s really confusing why we had to install a JQuery UI module and enable it, yet we still have to manually copy all the files to a location and manually add them in our template.php.
Nonetheless. Getting jQuery to work finally is Priceless
. Thanks for the great post.
Matt
July 19, 2011 at 18:19
Wow, thanks man, WHY this isn’t on the jquery_ui module page I will never know, it’s just insane that the module doesn’t manage adding the css for you.
I do have a question though, and this may be coming from being still a bit new to Drupal – but is step 9 really the best way to do this? Would it be better if these declarations be in a module somewhere? Just curious what the most drupal-y way to address that step is.
Thanks again!
simone
October 11, 2011 at 11:36
Thx man, it’s 04:35 AM and I had been stuck on this until I found you. Applause!
Andrew
October 12, 2011 at 17:06
Everything went fine following your directions except I discovered that after I coped over the development-bundle files I also had to copy over the jquery-ui-1.7.3.custom/js to /sites/all/modules/jquery_ui/jquery.ui as well. After that everything worked great. Thanks!
Muneer
November 21, 2011 at 16:44
Hi H,
Interesting lesson,
although, I see this is not the right way to add UI model while we have installed the jauery_ui module already. We can simply call API
jquery_ui_add(array(‘ui.datepicker’));
and so on…
Sudesh
January 6, 2012 at 15:03
Great lesson helped a lot …