Is there a location where I can drop in a custom JavaScript file in Drupal 7.x?
It just includes simple event actions for menus, and I don't want to edit the theme/module files.
Or do I have to just add the "include" hook to the theme/module?
Add a comment
|
3 Answers
There's three places where you can put your Javascript resources:
- Your theme folder. If you have a theme in your site named Mechaflash, you could put it inside Mechaflash/js or just in
Mechaflash. In order to make the theme folder "more organized", generally people create a dedicatedjsfolder. I would place Javascript in the theme when your Javascript delivers functionality specific to the theme / presentation layer, or that it affects all of the site (global). - In one of your custom modules. The same principle of creating a dedicated
jsfolder can also apply here. I generally put JS on the modules when the Javascript is delivering a very specialized functionality relevant to a specific module. It also allows you to "package" your Javascript with your modules and to pass this modules to other sites (i.e. a modular approach). - In the site's library folder. I've never done this personally. Not because it's bad, but because I think it's reserved for more complex functionality that other modules (and themes) can use. A good example, the JQuery UI library.
You can do all of this using the drupal_add_js() function. Here are some examples of how to add a JS file from a module:
// Add a "javascript library" from your module. JS_LIBRARY is an integer constant with a value of -100, which means that `mecha_library.js` will be added before `mecha_ninja.js`.
$module_path = drupal_get_path('module', 'my_module');
drupal_add_js($module_path. 'js/mecha_library.js', array('group' => JS_LIBRARY));
// Add a javascript file from your module. The default 'group' here is JS_DEFAULT, so mecha_ninja.js will be added after mecha_library.js.
$path = drupal_get_path('module', 'my_module');
drupal_add_js($path. 'js/mecha_ninja.js', 'file');
-
1The libraries API essentially lets a module/theme declare that it Wants to use a library, and it will be loaded if anyone has declared the need. It cuts down on potentially loading things twice, or loading things when they aren't needed.2011-12-15 19:27:32 +00:00Commented Dec 15, 2011 at 19:27
-
And that counts as a 4th approach, or if you will, as a substitute to the 3rd approach that I mentioned above, because it would generally be preferable to use the Library API rather than specifying a library with drupal_add_js(), for the very reasons @MPD mentions above.amateur barista– amateur barista2011-12-15 19:31:53 +00:00Commented Dec 15, 2011 at 19:31
-
I'm attempting #1. I went to the theme's folder but there wasn't a js folder. If I create one and drop the file into it, it doesn't load on the page. Do I have to include the drupal_add_js() function no matter what? If so which file do I add it to?Anthony Miller– Anthony Miller2011-12-15 19:49:31 +00:00Commented Dec 15, 2011 at 19:49
-
You could call drupal_add_js() in template.php. However when working with the theme, it is much easier to add the relative path to your javascript file to your theme's .info file.amateur barista– amateur barista2011-12-15 19:52:17 +00:00Commented Dec 15, 2011 at 19:52
-
@Mechaflash just remember you can't just drop a JS file in your theme, you need to declare it in your
.infofile hence modify your theme. Also theses changes will be deleted on each theme update so you'd rather consider a sub-theme.tostinni– tostinni2011-12-16 15:30:01 +00:00Commented Dec 16, 2011 at 15:30
Drupal 7 allows scripts[] and stylesheets[] in both theme.info and module.info files.
The easiest way is in your theme .info file.
You just need to add scripts[] = myscript.js in to the .info file of the theme you are using.
