I see many fail installations on jQuery UI, after help several users then I think it's time to write detail instruction based on my experiences:

Installation Procedure for jQuery UI 1.7.3 Basic and Custom version

  1. First, you must aware that there're 2 types of jQuery UI library!
    a. jquery-ui-1.7.3.zip: from http://code.google.com/p/jquery-ui/downloads/list
    b. jquery-ui-1.7.3.custom.zip: from http://jqueryui.com/download

    What is the differect between them?
    jquery-ui-1.7.3.zip: is the basic version, no additional theme
    jquery-ui-1.7.3.custom.zip: is a custom version, you must choose which components and additional theme. After click Download then a custom jquery created for you. REMEMBER that in this "custom" build there is a new folder called "development-bundle"

  2. Now, we need to install jQuery Update 6.x-2.0-alpha1 first! Why? Because jQuery UI 1.7.3 needs jQuery 1.3.2. Download from here: http://ftp.drupal.org/files/projects/jquery_update-6.x-2.0-alpha1.tar.gz
  3. Install jQuery UI 6.x-1.4 from here http://ftp.drupal.org/files/projects/jquery_ui-6.x-1.4.tar.gz
  4. jquery-ui-1.7.3.zip: if you decide to use jQuery UI basic version then upload jquery-ui-1.7.3.zip to /sites/all/modules/jquery_ui, after extract this file you will have jquery-ui-1.7.3 folder, you must rename to jquery.ui, so your folder become: /sites/all/modules/jquery_ui/jquery.ui
    Remember: jquery dot ui (jquery.ui) not jquery_ui !
  5. jquery-ui-1.7.3.custom.zip: if you decide to use jQuery UI custom version then upload jquery-ui-1.7.3.custom.zip to /sites/all/modules/jquery_ui, after extract this file you will have jquery-ui-1.7.3 folder also, you must rename to jquery.ui also, so your folder become: /sites/all/modules/jquery_ui/jquery.ui
    BUT .... you need additional step: open "development-bundle" folder and move all contents of /sites/all/modules/jquery_ui/jquery.ui/development-bundle to /sites/all/modules/jquery_ui/jquery.ui, you then may delete this empty development-bundle folder
  6. Done!

ATTENTION! If your previous installation fail then you must click:
* Site Configuration - Performance -Clear cached data

Comments

riiver_of_dreams’s picture

riiver_of_dreams CreditAttribution: riiver_of_dreams commented

Just wanted to say THANK YOU. I've read half a dozen how-tos for installing jquery UI, none of which worked. This worked. Thanks!

ergophobe’s picture

ergophobe CreditAttribution: ergophobe commented

Thanks - worked great

afox’s picture

afox CreditAttribution: afox commented

Thanks, bonked my head with this & Hierarchial Select for a while!

garymullins’s picture

garymullins CreditAttribution: garymullins commented

Would it be a problem to use jQuery UI 1.8.10? It works with jQuery 1.3.2. I have searched this site and I cannot find a definitive answer about using it. I am using Drupal 6.20

mrothmay’s picture

mrothmay CreditAttribution: mrothmay commented

Thanks for your clear, step-by-step instructions.
jQuery 1.7.2 worked for me, 1.8.1 did not.

EvanDonovan’s picture

EvanDonovan CreditAttribution: EvanDonovan commented

This worked for me as well. Could you add this as a handbook page in the jQuery UI docs, so that the task could be marked "fixed"?

I should note that jQuery UI 1.8.x did not work with the Tabs module (http://drupal.org/project/tabs), for anyone who may be trying to use these two modules together. jQuery UI 1.7.x did, however.

jebernier’s picture

jebernier CreditAttribution: jebernier commented

Installed, now what? Not sure how to use it? Should I be seeing something in CKEditor?

Thanks-in-Advance,

John

msathesh’s picture

msathesh CreditAttribution: msathesh commented

Thanks for posting the difference between the custom jQuery and the basic version. I didn't knew it before reading here.

karljohann’s picture

karljohann CreditAttribution: karljohann commented

The reason (as far as I can tell) why 1.8.10 doesn't work is because in that version the names of the script files has been changed to jquery.ui.widgets.min.js, etc. so the links to the files are all wrong.

garymullins’s picture

garymullins CreditAttribution: garymullins commented

Just a thought, but could that be addressed with a template override?

hooface’s picture

hooface CreditAttribution: hooface commented

Thanks - worked great

amariotti’s picture

amariotti CreditAttribution: amariotti commented

Great tutorial. Definitely helped.

dags’s picture

dags CreditAttribution: dags commented

If you've just downloaded 1.7.3 or 1.8.x from http://jqueryui.com/download, the jquery.ui folder might not have sufficient permissions by default, which will result in a "jQuery UI plugin is missing..." error on the modules page. "chmod 755 jquery.ui" worked for me.

dags’s picture

dags CreditAttribution: dags commented
emdalton’s picture

emdalton CreditAttribution: emdalton commented

Another thank you for these instructions!

If jQuery UI requires jQuery Update, why isn't that listed as a dependency?

giacy86’s picture

giacy86 CreditAttribution: giacy86 commented

The upload path should not be "/sites/all/libraries/jquery.ui"? In fact, into jquery_ui.module there is:

//[...]
// Manually check sites/all/libraries in case Libraries API is not available.
  elseif (file_exists('./sites/all/libraries/jquery.ui')) {
    $path = 'sites/all/libraries/jquery.ui';
//[...]
dunx’s picture

dunx CreditAttribution: dunx commented

Worth noting you can download jQuery UI 1.7.3 dev bundle and themes package from http://blog.jqueryui.com/2010/05/jquery-ui-173/

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ at Acquia commented
Status: Active » Closed (outdated)

Version for Drupal 6 is not supported anymore, closing.