How do I include a custom JavaScript file in a module?

Question

I want to include a custom JavaScript file in a module using the following code.

function profile2_form_user_register_form_alter(&$form, &$form_state) {
  drupal_add_js('http://localhost/prf2.js', 'external');
}

I then add scripts[] = js/prf2.js in the .info file, but it throws this error.

Warning: file_get_contents(js/prf2.js): failed to open stream: No such file or directory in drupal_build_js_cache()

Answer 1

This is the right & simple way to include any JS file in Drupal 7.

1. Create a folder named i.e. js, inside your module folder.

2. Inside that folder place (modulename).js file.

   Note: Drupal JS code has a specific format as follows:

   (function ($) {
     $(document).ready(function(){
       alert("Hello world!");  //here we can add our JS code
     });
   })(jQuery);
   

3. Open (modulename).info file & add:

   scripts[] = js/(modulename).js

4. Clear Cache & Run.

Answer 2

There is a lot of documentation about how to include a JS file into a custom module or into your theme in general. Here is the official article: https://www.drupal.org/node/304255

There are plenty of examples and you can inspire yourself with it.

PS: Don't hardcode the path of your JS file as you did in your code. Use the drupal_get_path function.

Answer 3

Here is two place where you can add JavaScript: In a theme or in a module.

1. Theme

If you want to add JavaScript in theme simply go in your_theme.info file and add your file path for example if your theme directory is:

mytheme\
 \js\my_theme.js
 \my_theme.info

So write down:

scripts[] = js/my_theme.js

Under your my_theme.info clear cache from admin and that should be work

2. Module

I you want to add js in module then

my_module
my_module\js\my_module.js
my_module.module

In my_module.module call hook:

function my_module_init(){
    drupal_add_js(drupal_get_path('module', 'my_module').'/js/my_module.js');
}

Above code add JavaScript once module enable.