25

Every page of my theme will need to use jquery UI. I know it's included with Drupal 7, but I can't really decipher Drupal's way-too-technical documentation. It looks like the only way to do it is with the template.php file. But since I don't understand that file, I'm trying to avoid doing it that way.

Is there another way, or should I just try the template.php file?

  • What are you trying to do? All of the jquery UI functions and what not should be available to you. Execute custom JS code on every page? Execute it on a specific page? a specific event? There are lots of ways to get JS to execute, namely drupal_add_js – LSU_JBob Dec 28 '11 at 20:34
  • I'm trying to use .datepicker() on some fields that appear in every single page in my theme. Maybe some more stuff later too. – Ben Dec 28 '11 at 21:04
  • @Ben Remember to award the bounty if an answer solved your problem. – googletorp Jan 10 '12 at 11:24
  • @googletorp Sorry, my first bounty. Bounty awarded. – Ben Jan 10 '12 at 13:59
  • I feel like many of the answers leave out the final step, that once you include the drupal_add_library('system', 'ui.button') or whatever, you need to add a line or two of javascript to your theme that actually invokes said plugin. – Ryan Price Oct 3 '14 at 11:57
36
+50

Adding JS to a page is really not that hard, even though you need to use php.

For normal JS files, you could do something like this

drupal_add_js($path_to_js)

Drupal has however registered jQuery UI into libraries making it easier to add both JS and CSS files for certain jQuery UI plugins. This can be done using

drupal_add_library($module, $library);

All the jQuery UI plugins exist in the system module, so you could do

drupal_add_library('system', 'ui');

or

drupal_add_library('system', 'ui.accordion');

Some of these plugins have dependencies because they use other plugins. Drupal handles this very cleverly and will included the components needed.

You can see the full list of jQuery plugins here. This is formatted as a PHP array, but generally the naming convention is ui.PLUGIN-NAME.

If you need to add the JS on every page you could simply add a preprocess page hook and add them there. This would look something like this in the template.php file.

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}
  • I tried adding exactly what you have here (but using my theme name in place of NAME_OF_THEME) to template.php and it didn't work. Any ideas? This is what I have: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); } – Ben Jan 9 '12 at 14:16
  • @ben You need to clear cache every time you add a new hook or preprocess function. Try clearing cache. You also need a way to test if it works, since you are only adding JS files which won't do anything by themselves. – googletorp Jan 9 '12 at 14:23
  • I did clear cache, and It should be working on some date fields that were previously using a manually referenced jquery UI. Still debugging, but can't find anything wrong so far. – Ben Jan 9 '12 at 14:46
  • @Ben First step is to look at source and see if the files has been included (disable JS aggregation if turned on) – googletorp Jan 9 '12 at 14:50
  • 3
    @googletorp: Could you elaborate a bit on the difference betweeen drupal_add_library('system', 'ui'); and drupal_add_library('system', 'ui.accordion');? Is the first one fetching everything or just the core? Do I need to a line for every plugin I use? – Jarl Jan 28 '13 at 19:36
2

Adding a preprocess hook in the template.php file did not work for me.

I simply put drupal_add_library('system', 'ui'); into the template.php file by itself, works.

3

Thanks googletorp for answering this.

Just to add, if things are still not very clear related to enabling UI plugins.

Please note that when you will mention: drupal_add_library('system', 'ui');
This will NOT enable all the ui plugins automatically.

You can find list of available jquery ui plugins in drupal 7 here: /misc/ui/

To enable a perticular plugin, forexample: jquery.ui.slider.min.js, you need to add this line:

drupal_add_library('system', 'ui.slider');

Hope this is useful.

2

I had this problem recently. Someone gave me their custom module to force JQuery UI to load on every page. You can recreate it simply. First, install jquery_update and make sure it's working. Then, create & enable this module:

Make a folder in path/to/modules named 'jquery_force'.

Inside, add two files:

jquery_force.info:

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module:

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}
4
  1. Refactor your hard-coded form in the .tpl file into a Form API implementation. Like @LSU_JBob said, there is no reason why you should be creating a form without using FAPI. I recommend you read the Form API Quickstart Guide, and bookmark the Form API reference page.
  2. Once you have your form built and you are able to submit values to it, process it, etc., download and read the code in the Date contrib module. Date is used to provide the kind of date popup you want to create, but for CCK in D6 and Core Fields in D7. Although you are not looking to work with fields, the Date module uses JQuery UI to accomplish what you are trying to do. This module should give you a solid example.
  • Thanks. Those links are helpful. I don't really like to get into the PHP, but I guess to do exactly what I want to do in this case, I have to. I'll probably just keep it in the tpl file for time sake, as I don't have the time to learn Drupal PHP at the moment. Good advice from everyone though. – Ben Jan 6 '12 at 15:50
4

have you tried the date_popup module? works good with the form API

  • I don't want a module because the form that needs it is very complex and requires custom coding. It's hard coded into the template for the theme. I'm trying to figure out the best way to make use of the jquery UI that ships with Drupal. The only way I can get it to work is to put it in my theme's folder and link to it there. But Since I'm running multiple sites on one Drupal install, and all these sites will need jQuery UI, I wanted to just use the built in jQuery UI to prevent duplicate work. – Ben Dec 29 '11 at 13:06
  • you should be able to call any jquery ui stuff from any site and add it in, it's in drupal core. Is the form built with the Form API? – LSU_JBob Dec 29 '11 at 17:19
  • 2
    Why is the form built into the template files? that's not very drupaly... if you're not using the form API you are missing out on some of the benefits, like built-in security from SQL injection attacks. I would STRONGLY recommend taking your forms out of the template files and write a custom module where you make the forms using the Form API. Try not to be a cowboy. In any event, you can reference javascript from anywhere using drupal_add_js, something like this drupal_add_js('/misc/ui/jquery.ui.core.min.js', 'file'); AND drupal_add_js('/misc/ui/jquery.ui.datepicker.js', 'file'); – LSU_JBob Dec 30 '11 at 14:18
  • 3
    Create the form in a custom module using the Form API, then in the tpl files call render(drupal_get_form('form_id')); I promise the form api, maybe with some custom javascript, can handle any complex requirement you have. I feel like you're only making things harder on yourself by trying to cram all of this functionality into a tpl file. That's technically the theme layer, so it's not best practice to plop in big chunks of functional back-end code in them. – LSU_JBob Dec 30 '11 at 14:24
  • 3
    I think he's saying CREATE a module. Functional things, like forms, belong in modules. The Form API lets you create any kind of form you can imagine in your own custom module. The theme should be independent of functionality in most cases. That will give you more flexibility down the road. – Jonathan Rowny Jan 5 '12 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.