Best way to add page specific JavaScript in a Rails 3 app?

Rails 3 has some unobtrusive JavaScript which is pretty cool.

But I was wondering what the best way is to include additional JavaScript for a particular page.

For example, where I might have previously done:

<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>

We can now make it unobtrusive with something like

<%= f.radio_button :rating, 'positive' %>

# then in some other file
$('user_rating_positive').click(function() {
  $('some_div').show();
}

So I guess my question is where/how to include that JavaScript? I don’t want to fill up the application.js file because this JavaScript is only applicable to this one view. Should I include a custom JavaScript file for each page somehow, or stick it in an instance variable that the header looks for?

Solution 1:

What I like to do is include the per-view Javascript in a content_for :head block and then yield to that block in your application layout. For example

If it's pretty short then:

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

or, if longer, then:

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

Then, in your layout file

<head>
  ...
  <%= yield :head %>
</head>

Solution 2:

If you want to include javascript just on one page, you can include it on the page inline of course, however if you want to group your javascript and take advantage of the asset pipeline, minified js etc, it's possible to do so and have extra js assets which are combined and only loaded on specific pages by splitting your js into groups which only apply in certain controllers/views/sections of the site.

Move your js in assets into folders, with a separate manifest file for each, so if you had an admin js library that is only used on the backend, you might do this:

assets
- javascripts
  - admin
    - ...js
  - admin.js (manifest for admin group)
  - application.js (manifest for app global group)
  - global
    - ...js

in the existing application.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global // requires all js files in global folder

in a new admin.js manifest file

//= require_tree ./admin // requires all js files in admin folder

Make sure this new js manifest is loaded by editing config/production.rb

config.assets.precompile += %w( admin.js )

Then adjust your page layout so that you can include some extra js for the page head:

<%= content_for :header %>

Then in views where you want to include this specific js group (as well as the normal application group) and/or any page-specific js, css etc:

<% content_for :header do %>
  <%= javascript_include_tag 'admin' %>  
<% end %>

You can of course do the same thing with css and group it in a similar way for applying only to certain areas of the site.

Solution 3:

These answers helped me a ton! If anyone wants a little more...

You need to put javascripts into manifests if you want them precompiled. However, if you require every javascript file from application.js.coffee then all the javacsripts will be loaded every time you navigate to a different page, and the purpose of doing page-specific javascripts will be defeated.

Therefore, you need to create your own manifest file (e.g. speciifc.js) that will require all the page-specific javascript files. Also, modify require_tree from application.js

app/assets/javascripts/application.js

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

app/assets/javascripts/specific.js

//= require_tree ./specific

Then in your environments/production.rb add this manifest to the precompiled list with the config option,

config.assets.precompile += %w( specific.js )

Done! All the shared javascripts that should always be loaded will be placed in app/assets/javascripts/global folder, and the page-spcific javascripts in app/assets/javascripts/specific. You can simply call the page-specific javascripts from the view like

<%= javascript_include_tag "specific/whatever.js" %> //.js is optional.

This is sufficient, but I wanted to make a use of javascript_include_tag params[:controller] too. When you create controllers, an associated coffeescript file is generated in app/assets/javascripts like other people mentioned. There are truly controller-specific javascripts, which are loaded only when the user reaches the specific controller view.

So I created another manifest controller-specific.js

app/assets/javascripts/controller-specific.js

//= require_directory .

This will include all the automatically-generated coffeescripts associated with controllers. Also, you need to add it to the precompiled list.

config.assets.precompile += %w( specific.js controller-specific.js )

Best way to add page specific JavaScript in a Rails 3 app?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts