Loading JavaScript in view in Ruby on Rails

Question

I want to use view specific JavaScript in Ruby on Rails 4.2.0 so I wanted to load it dynamically wherever I want to load it. I put the the javascript file which should be loaded(headers.js) in assets/javascripts. I removed the require tree line in the application.js file.

I have updated application.html.erb

application.html.erb

<!DOCTYPE html>
<html>
   <head>
      <title>Sandbox</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= stylesheet_link_tag params[:controller] %>
      <%= csrf_meta_tags %>
      <%= render 'partials/shim' %>
   </head>
   <body>
      <%= render 'partials/header' %>
      <%= yield :javascript_includes %>
      <%= render 'partials/footer' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   </body>
</html>

and I wanted to call the javascript file on the very top of the view.

view.html.erb

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "headers.js" %>
<% end %>

I have updated the initializers/assets.rb file as well:

Rails.application.config.assets.precompile += %w( headers.js )

For some reason the html content of the view will not load and I'm getting an error in the console: Uncaught ReferenceError: jQuery is not defined.

Why it does not work? How I can make this work and what am I missing?

Maybe your file depends on jQuery, and you're trying to load it before Rails loads jQuery, you'll need to see if changing the order of assets make it work. — Sebastián Palma
– Sebastián Palma, Commented Jul 29, 2017 at 21:17
Try just <%= javascript_include_tag "headers.js" %> and restart your server, what do you get? — Sebastián Palma
– Sebastián Palma, Commented Jul 29, 2017 at 21:27

Sebastián Palma · Accepted Answer · 2017-07-29 22:54:42Z

1

Instead passing javascript_includes to yield, try just requiring your needed javascript file wherever you want directly in the view, something like:

<%= javascript_include_tag "headers.js" %>
  <div class="vertical-center">
    ...

Your body in application.html.erb just like:

<%= render 'partials/header' %>
<%= yield %>
<%= render 'partials/footer' %>

And you could move the application.js file to the top, in order to preserve the Rails "structure":

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
...

answered Jul 29, 2017 at 22:54

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Teja Dandu · Accepted Answer · 2018-03-09 09:46:28Z

0

This should work:

Add in view

<% content_for(:head) do %>
  <%= javascript_include_tag 'headers.js' %>
<% end %>

And in initializers/assets.rb

Rails.application.config.assets.precompile += %w( headers.js )

answered Mar 9, 2018 at 9:46

Ravi Teja Dandu

4762 silver badges7 bronze badges

Collectives™ on Stack Overflow

Loading JavaScript in view in Ruby on Rails

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related