Javascript Include Tag Best Practice in a Rails Application

Asked 23/12, 2008 at 21:48 Answered 19/6, 2013 at 5:51

Solved javascript ruby-on-rails header rjs

Say I need to call a javascript file in the <head> of an ERb template. My instinct is to do the usual:

<head>
<%= javascript_include_tag :defaults %> <!-- For example -->
</head>

in my application's layout. The problem of course becoming that these javascript files are loaded into every page in my application, regardless of whether or not they are needed for the page being viewed.

So what I'm wondering is if there's a good way of loading a javascript into the the headers of, for example, all ERb templates found only in a specific directory.

Sunstone answered 23/12, 2008 at 21:48 Comment(0)

110

I would use content_for.

For instance, specify the place to insert it in the application layout:

<head>
<title>Merry Christmas!</title>
<%= yield(:head) -%>
</head>

And send it there from a view:

<%- content_for(:head) do -%>
<%= javascript_include_tag :defaults -%>
<%- end -%>

Olivo answered 23/12, 2008 at 22:2 Comment(4)

Why the <%- instead of <%= ? Is this some special syntax? – Vidavidal 24/7, 2011 at 12:2

In older versions of rails the "<%-" prevents erb from generating unnecessary spaces before the <% tag. This is happens automatically with newer versions – Galvan 17/8, 2011 at 17:52

This answer helped, but I prefer a shorter implementation with just one line: <% content_for(:head) { javascript_include_tag :this_file, :that_file, :more_files } %> – Oisin 3/2, 2012 at 17:32

@MaffooClock: And if you want even shorter you can remove the curly brackets and just do <% content_for :head, javascript_include_tag(:this_file, :that_file, :more_files) %>. See? Saved two chars! ;-) – Herbivorous 12/2, 2012 at 18:35

I feel there's nothing wrong including all yr defaults since they can then be cached on user's browser.

Proparoxytone answered 24/12, 2008 at 14:51 Comment(1)

what about if you have includes that are only applicable to the admin part of a website? – Irina 6/12, 2009 at 12:33

I would suggest not to add javascript in the header as it causes to load the page slower. Rather load the js at the bottom of the page, which is faster. http://developer.yahoo.com/performance/rules.html#js_bottom

<body>
 ....
  <%= yield(:js) -%>
</body>

And send it there from a view:

<%- content_for(:js) do -%>
  <%= javascript_include_tag :defaults -%>
<%- end -%>

Sanborne answered 19/6, 2013 at 5:51 Comment(0)

I usually have the following in the layout file:

<head>
  <%= javascript_include_tag :defaults %> <!-- For example -->
  <%= @extra_head_content %>
</head>

And then in the views:

<% (@extra_head_content ||= "") += capture do %>
  <%= other_content %>
<% end %>

See the API documentation for #capture

Encaustic answered 23/12, 2008 at 21:56 Comment(0)

Recommended topics

Hot tags