Improve installation instructions

Hey Kyle, I am fairly new with all this too, but I ran into a similar problem.

1)So after you download the jQueryUI module http://drupal.org/project/jquery_ui, the
jQueryUpdate module http://drupal.org/project/jquery_update, and jQuery UI
either 1.6 or 1.7.2 http://jqueryui.com/

2)You need to rename the the jQuery UI(1.6 or 1.7.2) folder to jquery.ui
and move it to the jQueryUI module folder.

3)What you are left with are two folders, the jQueryUI and jQueryUpdate module folder.
Now, just upload those modules to your /sites/all/modules directory.

4) Enable the modules in drupal and "run cron" and you should no longer see that message.

Hopefully I didn't leave anything out and good luck =)
Nick

Hi Kyle,

Seems like the structure of the jQuery UI zip file has changed a little. When you extract the zip file (use Nicks links above) you'll probably see three folders created:

css
js
development-bundle

everything inside the development-bundle folder needs to be in ../sites/all/modules/jquery_ui/jquery.ui for it to work properly

Hello Developers,
I just faced me too the situation like KJJacobson today, so I would like to suggest two things I believe could be a sort of help and clarification for those new to the indeed very easy installation process.

1. Since someone may think the "jQuery UI module" IS currently enabled even after read the alert that "jQuery UI plugin" is missing, in the modules page (!), I personally would change the alert message to say something like (sorry for the english!):
   The jQuery UI module has not be enabled. You need to download the jQuery UI plugin and then re-enabled it in order to get it functioning (See README.txt for instructions)
2. Besides I found that JQuery UI 1.6 downloaded from http://jqueryui.com/ has a different directories structure than JQuery UI 1.6 from the code.google.com link suggested in the README.TXT. I think it would be helpful to advise users about this eventuality in the README.txt file.

Many thanks for your attention.

zoo

Thank you for great help, in this thread and in others. The Drupal community sure is amazing!

I have been trying all day to get the jQuery UI to interact with part in already existing module. Most the CCK of course.

This is want I have tried so far:

1. Followed all instruction above
2. Created a script.js file in my theme and included it in my theme .info file
3. Wrote this code below in the script.js file where 'edit-field-obj-rent-0-value' is the ID of a input field in a Add content form (CCK)

As you can see I am new to Drupal. Would be most grateful, since this will be a large part of our website.

// $Id$

// Adds theme jQuery
// nice.
jquery_ui_add('ui.slider');

if (Drupal.jsEnabled) {
$(document).ready(function(){
$('#edit-field-obj-rent-0-value').slider({
orientation: 'vertical',
min: 0,
max: 150,
value: 50
});

});

}

I'm a newbie. I'm not a developer, but I've built a couple of css sites, but never done any javascript. I've been trying to get the jquery module loaded. It shows up on my module admin page, but won't enable. I click to enable and save config, but it doesn't enable. I've run cron and updatephp, but no help.

I tried to follow the instructions, and here's what I've done:
1* I created a jquery_ui directory in sites/all/modules, uploaded jquery_ui-6.x-1.3.tar and extracted it. It created a jquery_ui sub-directory with all the files.
2* I created a jquery.ui directory in sites/all/modules/jquery_ui/jquery_ui, uploaded jquery-ui-1.7.2.custom.zip and extracted it. It created css, js, and development-bundle sub-directories and an index.html file.
3* I created a jquery_update directory in sites/all/modules, uploaded jquery_update-6.x-1.1.tar and extracted it. It created a jquery_update directory with all the files.
4* I ran update.php and cron.
5* jQuery UI 6.x-1.3 shows up in module admin page under User Interface, but like I said, it won't enable.

I haven't yet tried steammultimedia's suggestion to move all the files (and sub-folders, I assume?) from sites/all/modules/jquery_ui/jquery_ui/development-bundle into sites/all/modules/jquery_ui/jquery_ui/jquery.ui

Maybe this is a different issue, but uploading and extracting on my host the way I've been doing it creates two nested directories. So I don't have a .../modules/jquery_ui/jquery.ui directory, but I have a .../modules/jquery_ui/jquery_ui/jquery.ui directory. Does this matter?

I'm running 6.14 core.

Thanks for any help/hand-holding.

Moving the development-bundle folder into jquery.ui appears to have worked for me. Possibly that could be changed in the readme?

I did all this stuff and have site/all/modules/jquery_ui/jquery.ui/ js and css and develop...

but when i go to the administration section and turn the jquery_ui on it says the following mensage:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 71 bytes) in /home4/univesc3/public_html/4.0/includes/database.inc on line 205

if i reload the page it goes weel.. and show the option to run the cron... but after that nothing happens and jquery_ui didn't turn on.

what is this erro?
what can i do?

#9 http://drupal.org/node/207036

for late comers, i installed this module with 1.7.2 jquery_ui with folder structure like:

-sites/all/modules/jquery_ui/
--jquery.ui/ (created manually)
---demos/
---docs/
---external/
---tests/
---themes/
---ui/
---AUTHORS.txt
---.....
--jquery_ui.info
--jquery_ui.module
--.....

I had this same problem, then realized I must have gotten an older version of the library. I re-fetched the latest library, moved the development bundle in as suggested, and still this jQuery UI was not enabled and unable to be checked. Ran cron, cleared caches - all of that.

Then I began to wonder if there was a conflict with jQuery Update, so I un-enabled that one and saved my change. To my surprise when the modules page reloaded, jQuery UI was magically enabled (as well as jQuery Update). Not sure what happened there, but thought I'd share in case it would be helpful for anyone.

RE #9

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 71 bytes) in /home4/univesc3/public_html/4.0/includes/database.inc on line 205

This is not necessarily caused by jquery_ui. Your server is not allocating enough memory to the Drupal site (or conversely, Drupal is demanding more memory).

You can fix by following the steps in this page: http://drupal.org/node/158043
(It's about the Drupal White Screen of Death, which happens sometimes when your memory runs out, of which your problem may be a precursor.)

Joe
http://www.hydeinteractive.com/

To try to put it simply for people who are just starting, there are the three files that need to be downloaded. (copied from above):

jQueryUI module
http://drupal.org/project/jquery_ui

jQueryUpdate module
http://drupal.org/project/jquery_update

jQuery UI either 1.6 or 1.7.2
http://jqueryui.com/

Do things in this order:
*****
jQueryUI Module is available on the Drupal website. It should be installed like a regular module, upload it to your modules folder and unzip it.
It will be called something like:

jquery_ui-6.x-1.3.tar.gz

This will create the "jquery_ui" module folder

*****
jQueryUpdate Module should be installed like a regular module, it is also available on the Drupal website. Upload and unzip it in your modules folder, NOT inside of the "jquery_ui" module folder that you just created. This is a seperate module.
It will be called something like:

jquery_update-6.x-1.1.tar.gz

This will create the "jquery_update" module folder

*****
jQuery

jQuery is not found on the Drupal site, you have to get it from http://jqueryui.com
Once you have it, it will look something like this:

jquery.ui-1.6.zip (the numbers and end file type may be different, but it won't have a 6.x-x.x in it)

This file you want to upload into the "jquery_ui" module folder. Don't extract it until it is in the "jquery_ui" module folder.

When you extract this file, it (this one in particular) creates a folder called "/jquery.ui-1.6". You need to rename that folder to just "jquery.ui" Do you see what I did there? I erased the "-1.6".

Enable the modules. If you get the white screen of death for a memory error, at least on hostmonster, go to:

http://www.briankenyon.com/content/how-fix-allowed-memory-size-x-bytes-e...

I had to increase the size of my memory to 128, it would not enable until I had done that. But I do have alot of modules.

I guess if this still doesn't work for you, then try running cron and clearing caches, but it's likely that you just have to go through the steps and make sure that you did them all correctly.

The way that the file structure needs to be set up is:

.../modules/jquery_ui/jquery.ui/...
--------------------- ^this is the folder that is created when you extract jquery.ui-1.6.zip
.../modules/jquery_update/...<---this is a seperate folder and module that needs to be enabled seperate from the jQuery UI module.

'Nother Drupal Newb here with a similar problem.

I have extracted jquery_ui-6.x-1.3.tar to my /modules directory, resulting in the path: /drupal/modules/jquery_ui.

Next I created a new folder within the above-named folder, the new one being named /jquery.ui, resulting in the following path:

/drupal/modules/jquery_ui/jquery.ui.

I then went to jqueryui.com and downloaded jquery-ui-1.7.2.custom which is supposed to be the latest stable release for drupal 6.x.

I then uploaded and extracted jquery-ui-1.7.2.custom inside of the /drupal/modules/jquery_ui/jquery.ui/ destination folder I created earlier.

However, when I go to the modules section I am still not permitted to activate it - even if I uncheck jquery_update and even if I run cron and clear the cache. This is getting very frustrating.

so the actual jQuery UI JavaScript files are located in:

/sites/all/modules/jquery_ui/jquery.ui/ui/*.js

I have to echo mongo.tld's problems. See the attached screen grab where I have followed the README.txt to the letter as far as I can see.

jQuery Update module have been running smoothly since it was installed. Cron, caches and such have been cleared with no luck.

After reading the jquery_ui.install file I made it work as following:

1. unpack the jQuery Update into sites/all/modules/
2. unpack the jQuery UI into sites/all/modules/ -> creates a path sites/all/modules/jquery_ui
3. create manually a subfolder sites/all/modules/jquery_ui/jquery.ui (for the plugin)
4. unzip the jquery-ui-1.7.2.custom.zip to a directory anywhere. Copy the files in the development-bundle (AUTHORS.txt, ..., version.txt) into sites/all/modules/jquery_ui/jquery.ui
5. copy the subfolder development-bundle/ui under sites/all/modules/jquery_ui/jquery.ui resulting sites/all/modules/jquery_ui/jquery.ui /ui/*.js.
6. copy the folder css under sites/all/modules/jquery_ui/jquery.ui resulting sites/all/modules/jquery_ui/jquery.ui /css (don´t know, if necessary, it works also without the css-directory!)

Aktivater the two new modules, it should work now.

I attached three screenshot where you can see the resulting structrue and the files in the folders.

Good luck!

Holy Moly! That wasn't easy. Followed Ostau's instructions and got it working (Thank you, the jpg was very helpful). The only teething problem I had was that I didn't have a separate css folder even though the files are there, doesn't seemed to have had any effect -yet. Thanks again.

This app is half baked. No other module is as big a PITA is this one. I'v spent hours trying to get this damn thing to work. All other modules in my drupal app work flawlessly save this one. Are there any definitive solutions to this?

I am very frustrated on this to say the least.

Edit: got it to work, should have read the instructions a few posts above!

Hello eclauset,

may I ask you which instructions helped, which post? Thank You!

Bye

zoo

ridiculous, but finally got it working.
what worked for me was disabling all the different jquery modules that I had plus image_assist. not sure which it was that was conflicting, but I feel like it was image_assist seeing as I had already tried the others..

For anyone still trying to sort it, download the package from the code.google.com site and not from jqueryui.com. Follow the link to jquery at code.google.com and then click on the project page (since the place you're taken to doesn't exist anymore). Then click download to download the latest version. Once I downloaded the version from google, no problems. Unpack into jquery.ui folder and bam. Don't download from the jqueryui.com site unless you have time to burn.

I GIVE UP!

I have to agree with remoran's sentiments...NEVER had this kind of trouble with any module, even ones like WYSIWYG that require external libraries...

I have followed the instructions to the letter, yet all I get when I enable this monster is a grayed out screen and the jquery 'working' icon...then I get a dialog box with the title of the module and a big icon of a camera with a line thru it...

I'm attempting to install this to use the latest Skinr functionality with Fusion Themes, but this aggravation isn't worth it!

I WAS having a problem with the $Event function when i tried to use de version 1.7 of jquery, installed in the correct folder /jquery_ui/jquery.ui (jquery.ui is the jquery.ui.1.7 renamed) and solved taking the jquery 1.3 in the jquery.ui folder and put it into the jquery_update module in /replace. There is a jquery.js that is normaly the 1.26 version and the minified file. I just overwrite the one with the new (did a backup first).

Them went to the admin > jquery update and selected the uncompressed file and SAVE!

that works!

I have re-visited this issue and tried to give another shot at solving it, I have so far been able to install jQuery UI 1.7.2 (almost as #16 by ostau) and the module (6.x-1.x-dev) reports everything as it should be. However, the actual .js files are not loaded on any page.

You need to add it to a node.tpl.php or views-view.tpl.php via drupal_add_js(). Or, alternatively, add it to the *.info config of your theme.

What's the point of this module if users have to write another module that calls drupal_add_js() anyway rather than using the supplied jquery_ui_add()?

@NiklasBr I think you are right!

I propose a collapsed menu item on the node/add form to select available jquery_ui modules to add to each node created (or enabled to include jquery_ui module). You can config it for each node type on the add content type form to add certain jquery_ui modules by default, that can be de-selected on the node/add form. What do you guys think? Should this be a separate module or an addition to jquery_ui module?

Thank you so much to those that have tried to help - after 5 hours I have finally got the damn thing to work.

ostau - Those screenshots were fantastic and formed the final piece of the puzzel.

In my case btw the server wouldn't give me permission to form the subdirectory jquery.ui.

If I uploaded the jquery uploader first it formed a directory that I didn't have permission to edit.

If I made the directory and subdirectory directly then I could not get the jqueryui module to upload as it kicked out various error messages.

I've finally had to piece it together using the screen shots to make sure all the files are in the right place, and upload the full file structure via FTP - strangely it then let me upload the jqueryui module which allowed me to enable it in the admin module.

I so hope this works :D

But there has got to be a more newbie friendly way than this as I was 1 more try from saying sod it and binning drupal all together.

So I've got the jQueryUI 1.3, and jQuery update 2.0(alpha) and jQuery 1.7 Development package (inside the "jquery_ui/jquery.ui" folder)
My jQueryUpdate module seems to be okay, but my jQueryUI module is greyed out. There is no "dependent upon..." note, I just can't activate the module...

I think I've tried all combinations of the software versions... any suggestions?
Thanks

Suggestion - Get yourself a nice cup of cocoa and prepare to be in for the long haul.

I'm actually back to have another go at this as after posting that I'd sorted it - I then found I had the wrong version (I used 1.8) which installed OK but then gave me an update version error when I tried to use the module depending on it - as it ws 10.30pm by then the site got deleted and toys came out the pram.

I've been looking at other options for last couple of days but I really don't want to go back to Joomla and I fancied using Drupal, so before heading off into the sunset I'm going to give it one last chance this morning.

I'll do a step by step later if I get it working - but in the meantime look at the screenshots in the posts above - they basically show that the development folder is renamed to jquery.ui not just in it.

If you get the download from http://jqueryui.com/download select the right version (1.7.3 in my case) and follow the instructions in #2

css
js
development-bundle

everything inside the development-bundle folder needs to be in ../sites/all/modules/jquery_ui/jquery.ui for it to work properly

And it should work.

@bloke_zero

It seems to work for you, but for myself and others this does not work. Something is broken.

I installed 6.x-1.3 according to #13, but taking jquery ui v 1.6 from google code.
http://jquery-ui.googlecode.com/files/jquery.ui-1.6.zip

So in modules/jquery_ui/jquery.ui there is now:
jquery-1.2.6.js and a ui subdirecory

On the drupal modules page there is no complaint any more about jquery ui missing.
jquery_update was already on my site.

However, on the drupal modules page, while Jquery UI is listed, the tickbox is disabled and it cannot be enabled.
Running cron.php didn't change things.

EDIT: I needed JqueryUI for the arrange_fields module. By disabling arrange fields first, I was then able to enable jqueryui, and then arrange_fields. So it works just fine now. (Arrange_fields is great, have a look :-)
When I see the problems others had, I would suggesting downloading v1.6 from google code, and not newer versions..

Thanks Boran, it works now with jquery_ui 1.6.

I followed Ostau's instructions & FINALLY got it to work!

Just to clarify for others, in step #4, you have to copy the files from the development-bundle folder, not the development-bundle folder itself!

I got the jQueryUI code from the Jquery website, not the Google site, and deleted any folders that weren't in your screenshots. I don't know whether that made a difference or not.

It still didn't work until I ran cron and disabled every module involving jQuery (including modules that depend on jQuery). Then when I saved, jQuery UI was magically enabled.

Thank you & others on this thread who give us beginners such helpful step-by-step instructions!

As to the greyed out box on the modules page, I was able to use drush to enable the module.

One thing that is confusing me with this is that my modules folder in not in under the sites/all/ directory. Is this a directory I have to create separate from the drupal core module directory? I'm a newbie as well, so please bear with me.

This isn't exactly the place to ask for general support, but at any rate you shouldn't put anything in the core module directory, you should put all added modules in sites/all/modules, meaning you should create the directory if it's not there.

Thanks.

#16 seemed to work for me.

Could not find a CSS file. Also, enabled jQuery Update and that seemed to be the final trick to being able to enable jQuery UI.

Good luck everyone.

OMG, this installation process is so annoying!

I finally got it to work. What I did:

1) disable any modules that depend on jQuery UI (this seemed to be the deal breaker for me)
2) get v1.7.3 from http://jqueryui.com/download (#34: jQuery UI from Google Code didn't work for me)
3) copy all files and the ui folder to the jquery_ui/jquery.ui folder (you don't need all the themes, css, etc stuff)
4) reload module install page and enable the jQuery UI module

Actually, I tried all of the above in Drupal 6.17, and still receive the error: The jQuery UI plugin is missing. Download and extract it to your jquery_ui module directory. See README.txt for more info. (Currently using jQuery UI Not found). Pretty much jQuery is not happening by use of this plug-in, or the methods listed above in Drupal 6.17.

I was able to get the jQuery UI installed following the directions from TinyMCE. For all that actually need to know how the folder layout should be: [sites/all/modules/jquery_ui/jquery.ui].

The download for any new [jquery_ui] packages must be extracted into the [jquery.ui] folder. It should be noted that for the first time setting up the directories, the extracted package will need to be renamed to: [jquery.ui], and then simply copy the folder itself into: [sites/all/modules/jquery_ui/].

Leave the contents of: [sites/all/modules/jquery_ui/] intact.

This is a complete pain in the ass to install. Followed all readmes and most of these comments and it still does not work.

Hi, I see there are some mistake in the README.txt.

These are the right steps:

Upload and extract this module, so you will have /sites/all/module/jquery_ui

Download jQuery 1.6 from this new link:
http://code.google.com/p/jquery-ui/downloads/list?can=1&q=1.6
Upload jquery.ui-1.6.zip to /sites/all/modules/jquery_ui/jquery.ui-1.6.zip

Extract then you will see /sites/all/modules/jquery_ui/jquery.ui-1.6/

Rename to /sites/all/modules/jquery_ui/jquery.ui/

Then goto Site Building - Modules, enable this module.

Just did that. Doesn't work for me.

#43 is the problem I have. Drupal 6.19. Just upgraded Date to the latest stable build and that message -will- go away, but jquery UI is not being loaded from what I can see and datepicker does not appear.

@Kevin Quillen:
Just tested in my website and you right, the error message was disappear but the POPUP DATE not showing. This happen since Date module delete its jQuery UI Date Picker (and grap from jQuery UI module).

Note: I think we must use jQuery 6.x-1.3 + jQuery UI 1.7 + jQuery Update 1.3. I will try this combination, some users report that we must use the dev folder of jQuery UI 1.7.

Working fine now!

There are few things:

1. Drupal 6.19 + jQuery UI 6.x-1.3 + jQuery Update 2.0 + jQuery UI 1.7.3 + Date 6.x-2.6
2. Follow comment #2: move all contents inside the development-bundle to /sites/all/modules/jquery_ui/jquery.ui
3. Change your theme to Garland (check if theme issue related)

NOTE: the folder structure different from jQuery UI 1.6 and 1.7.3.

This is for a production site, I am reviewing upgrades. I can't just switch the theme to Garland and other stuff, I need confidence in that it works. I will probably just leave Date out of the update.

I followed #50 on a development site and the same result, no popup.

Problem with the new Date module, got the error message to stop but it still did not work. I am not even sure what most of Date seems to do, just need a calendar. The links to events in the monthly calendar disappeared with the update.

This is so sad, it seems like a simple problem, just be explicit in what jquery programs are needed and how they should be installed. Weird.

For those having issues with jquery ui in drupal 6, I've created a complete guide from start to finish to get it working: http://blog.houen.net/24/code/drupal-6-and-jquery-ui-complete-guide/
Hope this saves someone the time than I spent on getting it to work...

nice ostau! followed your steps and now all jquery modules will enable. I then had to run cron.php in order to remove the error messages. thanks for taking the time to make a screenshot! :)

See also #749126: JQuery Plugin 1.8 is out

ditto #46 worked for me - thanks

Instead of messing with the folder structure you can edit the path to the "development-bundle"-folder in jquery_ui.module:

// line 24 or close, add folder to path
define('JQUERY_UI_PATH', drupal_get_path('module', 'jquery_ui') . '/jquery.ui/development-bundle');
// --

Thanks for HOUEN'S 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.

This one helped me. In order: I did the re-naming of the folder to 'jquery.ui', uploaded into jquery_ui module folder, but still wasn't working. So, I disabled JQuery Update, saved, then JQuery UI was was magically enabled when the screen refreshed.

Please review attached patch. Hopefully improves the situation.

Thanks for reporting, reviewing, and testing! Committed to all branches.

A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.

Instead of extracting the "jquery.ui-1.6.zip" package directly into the module's directory, I prefer having it in the "libraries" directory - residing at the same hierarchy level as the "modules" directory (sites/all/), and just symlink to it. Thus you can update the module much easier in the future, and the jquery.ui librarry could theoretically also be used by other modules. The following commands on the shell should make it 100% clear what goes where.

[root@www ~]# cd /etc/drupal/all/libraries
[root@www libraries]# wget http://jquery-ui.googlecode.com/files/jquery.ui-1.6.zip
[root@www libraries]# chmod 600 jquery.ui-1.6.zip
[root@www libraries]# unzip -q jquery.ui-1.6.zip
[root@www libraries]# mv jquery.ui-1.6 jquery.ui
[root@www libraries]# chown -R apache:apache jquery.ui

[root@www libraries]# cd ../modules
[root@www modules]# wget http://ftp.drupal.org/files/projects/jquery_ui-6.x-1.4.tar.gz
[root@www modules]# chmod 600 jquery_ui-6.x-1.4.tar.gz
[root@www modules]# tar -zxf jquery_ui-6.x-1.4.tar.gz
[root@www modules]# cd jquery_ui
[root@www jquery_ui]# ln -s ../../libraries/jquery.ui .
[root@www jquery_ui]# cd ..
[root@www modules]# chown -R apache:apache jquery_ui

@roball: This is the wrong issue to discuss a different path. See #489140: Libraries API

There is a key step still missing from the documentation:

If you add the jquery.ui folder after installing, you will need to run cron before the error message on the status screen will go away.

ah thanks experienced that myself, quite annoying. ;-) had to do a reinstall

#46 (and #58) worked for me

#46 did not work for me, and I'm pretty savvy with drupal.
I did a 'drush pm-enable jquery_ui' in bash. It now shows as grayed out and enabled in the modules list.
I think another dependent module forgot to enable jquery_ui when I enabled it (for example 'date picker' in the module list page), and then grayed out the module in the interface, thinking jquery_ui had been enabled when it had not.

Thanks!!!! Like the Lullabot crew, but your instructions were much clearer and got me up and running in no time (after hours of searching for the answer...).

Thank for your suggestions. This is the post I was looking for.

If you are having trouble getting jQuery UI to work with drupal 6, I have created a complete guide on how to get it to work here: Drupal jQuery ui complete guide
This guide is how it's worked for me, and many others following it. Enjoy ;)

This is the option that worked for me too! Thanks for posting!

I did #46 but the button was still grayed out in the enable module section. I pressed it nevertheless and then press save. BY some miracle when the screen refreshed the module was enabled (and still grayed out).

Hi all,

I managed to solve the greyed out problem for the jquery_ui module, by installing the jquery_update module, this way the last jquery version is running and once the jquery_update module is enabled, the jquery_ui module will be ticked automatically.

Hope it helps :)
Juan