Ruby on rails: javascript in asset pipeline

Question

I'm a complete noob and I'm trying to understand how to use javascript with the asset pipeline in Rails. For example, where do I put a simple $(document).ready to execute in a specific view. I have done that puting the code in the view itself, but I think thats not the best way to do it. Complementary reads would be appreciated too, thanks.

Answer 1

Here is a good read about the subject: http://railsapps.github.io/rails-javascript-include-external.html

Answer 2

create a new file called whatever_you_want.js I usually split these according to views or models. It doesn't really matter in the end since asset pipeline mangles it all to one big file. Splitting in to files is accoding to your preference and likings.

So, in whatever.js you can write whatever JS code you want, with $(document).ready, without.. asset pipeline doesn't really care.. If the code you writes needs $(document).ready, use it. If not, don't...

Once you finished with your JS, Rails will, by default, take all your js file which you told it in application.js manifest file and puts them in one file, by the order you wrote

so it will look like

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

so it will load jquery first, then jquery ujs, then bootstrap and then tree which is the current directory where application.js is at

Similarly you could only do

//= require whatever.js

On development, by default, you won't see one big file, but all of your files, since its much easier to debug this way.

Once you deploy to production, depending on what you need, you may precompile all your assets via asset pipeline with rake assets:precompile or you may have a script which will precompile automagically on deploy like asset_sync gem

Basically, you should put js code in js files and html code in view files since sprockets (the gem that compresses the js and stuff) doesn't handle JS that isn't on assets files/ files to be precompiled

Some complementary reads for you pleasure

http://guides.rubyonrails.org/asset_pipeline.html

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

http://blog.55minutes.com/2012/02/untangling-the-rails-asset-pipeline-part-3-configuration/

Hope that helps you in someway

After reading your question a few more times, I realize that what you are asking is "where to put js code that is relevant to a specific view"

Well, now what you are familiar with the asset pipeline, you can now understand how to work with it:

in your whatever.js file you write whatever you want to write.. Let's presume that you don't have //=require_tree . in application.js, so it doesn't include all js files, and you must have whatever.js in whatever.html.erb

in whatever.html.erb you can write

<% content_for :head do %>
  <%= javascript_include_tag "whatever.js" %>
<% end %>

Then, in your layout file (a file which has <%= yield %> somewhere inside, go to the head of the html and write

<%= yield :head %>

The name head is basically what you want.

This tells Rails something like "Hey man, this whatever.js file is for you.. just put it in the :head ok?" And Rails is like "You got it mister!"

This way you can include whatever js files you want in whatever views you want.

But since you said you are a complete noob, I would recommend to keep it simple, and include all js file in the first go, just use unique class and ID for your html elements and you should be fine. Most probably, some people may not agree with this. But since you said you are a complete noob, it doesn't really matter what I say or they say. Whatever is easier for you to understand is. So Experiment with it

Answer 3

All the JavaScript should be in app/assets/javascript

Also you can make a separate js file for particular view or you can write your js code in application.js file

put this code in layout <%= javascript_include_tag "application" %>

And finally run rake assets:precompile