Javascript Include Tag Best Practice in a Rails Application

Question

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.

score 111 · Accepted Answer · edited Apr 05 '11 at 17:54

111

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 -%>

edited Apr 05 '11 at 17:54

Matthew Simoneau

6,199
6
35
46

answered Dec 23 '08 at 22:02

maurycy

1,477
1
9
7

1

Why the <%- instead of <%= ? Is this some special syntax? – Martin Konicek Jul 24 '11 at 12:02
2

In older versions of rails the "<%-" prevents erb from generating unnecessary spaces before the <% tag. This is happens automatically with newer versions – Gu1234 Aug 17 '11 at 17:52
1

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 } %>` – Matthew Clark Feb 03 '12 at 17:32
7

@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! ;-) – Ivan Navarrete Feb 12 '12 at 18:35

score 6 · Answer 2 · answered Dec 24 '08 at 14:51

6

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

answered Dec 24 '08 at 14:51

JasonOng

3,268
3
21
17

11

what about if you have includes that are only applicable to the admin part of a website? – Ali Dec 06 '09 at 12:33

score 3 · Answer 3 · answered Jun 19 '13 at 05:51

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 -%>

Gareth · Answer 4 · 2008-12-23T22:03:36.670

1

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

edited Dec 23 '08 at 22:03

answered Dec 23 '08 at 21:56

Gareth

133,157
36
148
157

Javascript Include Tag Best Practice in a Rails Application

4 Answers4

Linked