Including inline javascript using content_for in rails

Asked 17/3, 2010 at 17:54 Answered 22/3, 2011 at 20:17

Solved javascript ruby-on-rails content-for

I am using content_for and yeild to inject javascript files into the bottom of my layout but am wondering what the best practice is for including inline javascript. Specifically I'm wondering where the put the script type declaration:

<% content_for :javascript do %> 
  <script type="text/javascript"> ... </script>
<% end %>

<% content_for :javascript do %> ... <% end %>
  <script type="text/javascript">
    <%= yield :javascript %>
  </script>
<% end %>

I am using the first option now and wondering if it is bad to include multiple

...

declarations within one view. Sometimes I have partials that lead to this.

Robillard answered 17/3, 2010 at 17:54 Comment(2)

What's your use case? Is this dynamically generated js? – Unblock 17/3, 2010 at 18:13

What would be an example of dynamically generated js? Sometimes I need to pass variables from a view to a javascript function at run time. – Robillard 17/3, 2010 at 18:27

I much prefer to have the layout's yield look like this:

<html>
  <!-- other stuff -->
  <body>
   <!-- other stuff  -->
   <%= yield :javascript %>
  </body>
</html>

Then in a view you can write:

<% content_for :javascript do %>
  <script type='text/javascript'>
    function doMagic() {
      //Mind-blowing awesome code here
    }
  </script>

<% end %>

<!-- More view Code -->

<%= render :partial => "sub_view_with_javascript" %>

And in the partial _sub_view_with_javascript.html.erb you can also write:

<% content_for :javascript do %>
  <script type='text/javascript'>
     function DoMoreMaths() {
       return 3+3;
     }
   </script>
<% end %>

My reasoning for this approach is that the yield and content_for are in different files. It is not DRY to put the script tag in for every content_for but it allows the syntax highlighter to recognize the change in language in each file and helps me there.

If you have multiple content_for calls in a single file to the same symbol (in our case, :javascript) I would consider consolidating them all to the top one, but it's perfect for use with partials.

And HTML is perfectly happy to have as many script blocks as you would like. The only possible gotcha is when working with the code in developer tools like firebug, it takes a little more time to find the right script block for your function. This only happens for me when I need to set a javascript breakpoint to debug.

Black answered 17/3, 2010 at 18:14 Comment(4)

I've read that it is best to put the javascript at the end of your layout just before the </body> tag so that the page loads faster. Did you mean to use the <head> element? – Robillard 17/3, 2010 at 18:25

I've not heard that before, and included things in head as a matter of course, but you're right, according to yahoo, developer.yahoo.com/performance/rules.html scripts in the head can slow down loading. I changed my answer based on this. – Black 17/3, 2010 at 18:34

@Robillard As far as I know, loading javascript just before the </body> tag allows to browsers to start downloading html, css and images without waiting all js files. So putting your little js scripts inline don't change anything. Either way, those custom script are never large; and if they become so, I move them into separate .js files. – Tracery 29/3, 2013 at 15:45

"test/javascript" -> "text/javascript" – Nubbin 20/7, 2016 at 21:31

Here's a solution if you really want to keep the number of < script> tag minimal in your html and still be able to have your IDE highlight javascript. It's really useful with jquery if you want only one $(document).ready() call in your html or with facebook js api to call js when the api is loaded, etc...

layout_helper.rb :

  def javascript_jquery_ready(script)
    content_for(:javascript_jquery_ready) {
      script .gsub(/(<script>|<\/script>)/, "")
    }
  end

application.html.erb :

<script>
    $(document).ready(function(){
        <%= yield(:javascript_jquery_ready) %>
    });
</script>

any view file:

<% javascript_jquery_ready (capture do %>
  <script>
    $('#share_access_link').click(function(){
      $('#share_access_form').slideToggle();
    }); 
  </script>
<% end) %>

This solution enable me to keep my code organise and readable in my IDE since I don't need to create partial for every js code. Even if it change nothing for the end user the html result is cleaner.

Historicism answered 22/3, 2011 at 20:17 Comment(0)

Recommended topics

Hot tags