How to load a Javascript asset depending on controller/action?

Question

This is the default application.js:

//= require jquery
//= require jquery_ujs
//= require_tree .

CoffeeScript templates have this content:

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

For me, "related to the matching controller here" means that foo_bar.js.coffee should ONLY be loaded when the foo_bar controller is used. Am I right?

Thing is that it loads all Javascript files even if they are not needed. Also... I would like to know how to conditionally include Javascript files depending on the controller's action.

lobati · Accepted Answer · 2014-01-31 19:57:22Z

12

A couple of ways to do this, the easiest and most elegant way I have found is this:

Remove the

//= require_tree .

Directive, and change your template to

<%= javascript_include_tag "application", controller_name %>

Then load your global js in application, and controller specific in controller_name.

For instance, if you are in posts_controller, you will get posts.js or posts.js.coffee loaded.

EDIT

To do the action, you can also add

action_name

to my proposed solution. One thing you may consider, is breaking it out into application_controller.rb:

before_filter :your_function

def your_function
  @controller = controller_name
  @action = action_name
end

Then using it like this in your layout

<%= javascript_include_tag "application", "#@controller.#@action" %>

edited Jan 31, 2014 at 19:57

lobati

10.4k6 gold badges45 silver badges73 bronze badges

answered Dec 11, 2011 at 23:02

andrewpthorp

5,1168 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cristian Over a year ago

Cool, this is how the generated skeleton should have been done. What about actions? I mean... I would like to load a JavaScript only for an specific action... is it also possible to do in an easy way?

clyfe · Accepted Answer · 2011-12-11 23:07:16Z

3

The require_tree directive in your application.js loads all js and coffee files found in your assets tree. If you remove it it will only load the specified files.

For me, "related to the matching controller here" means that foo_bar.js.coffee should ONLY be loaded when the foo_bar controller is used. Am I right?

No, files are loaded as specified via "require" directives.

Also... I would like to know how to conditionally include Javascript files depending on the controller's action.

Make a foo_bar.js file for each controller, in each require other files as needed, and conditionally include them in your layout

# some_layout.erb
<%= javascript_include_tag params[:controller] %>

edited Dec 11, 2011 at 23:07

answered Dec 11, 2011 at 23:01

clyfe

23.8k8 gold badges88 silver badges110 bronze badges

Collectives™ on Stack Overflow

How to load a Javascript asset depending on controller/action?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related