Per Page Inclusion of JavaScript in Rails view pages

I use various jQuery plugins in my Rails views but I don't want to download all that code in pages that don't use them. Furthermore I want to minimize the chance of namespace conflicts between different blocks of code.

A simple way to do this is to add these lines to your application.html.erb file after the main JS includes:

<%= yield :custom_javascript_includes %>

and then add a block similar to this in each view template that needs custom JS.

<% content_for :custom_javascript_includes do %>
  <%= javascript_include_tag "your_custom_plugin.js" %>
  <script type="text/javascript">
    // Your custom JavaScript code
  </script>
<% end %>

In this example I'm including a specific file from the public/javascripts directory and then adding some custom JS code that might define some events or trigger some action on page load.

Here is a real example that uses the facebox jQuery plugin which provides 'light box' functionality. This code is placed at the top of my 'show' template.

<% content_for :custom_javascript_includes do %>
  <%= javascript_include_tag "facebox.js" %>
  <script type="text/javascript">
 jQuery(document).ready(function($) {
       $('a[rel*=facebox]').facebox({
         loadingImage : '/images/facebox_loading.gif',
         closeImage   : '/images/facebox_closelabel.gif'
       });
 });
  </script>
<% end %>

You can take this further by also including custom stylesheets linked to these plugins in the same block. That can result CSS and JS includes being interspersed in the resulting HTML file which some people may not like, but I don't think there are any practical drawbacks to it.

The big win is that you keep your custom JS code right there in the same file as your HTML. If that JS code is substantial you could move it into a partial that resides in your views directory, as opposed to having it separated in the public/javascripts directory.

For high performance production sites you should weigh the benefits of this approach in terms of clarity with the performance benefit of stashing all your JS code in a single file and minifying it.