Working with javascript in a view in ruby on rails

Question

Alright guys, I am a ruby noobie here, and I find myself in the unfortunate situation where I am moving a project over from Django to Ruby on Rails. First things first, I am setting up my application.html.erb file, and I cannot seem to get the javascript working. The images and css are coming through, but not the javascript. There are javascript files within the assets directory and within the application.html.erb file. Neither are coming through.

All of my images, css, and javascripts are located within their respective directories in app/assets/.

My application.html.erb file head tag:

<!DOCTYPE HTML>
<HTML>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>The Atmosphere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/assets/atmosphere_favicon.png">
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" type="text/css" href="/assets/profile.css">
<link rel="stylesheet" type="text/css" href="/assets/advanced-slider-base.css">
<link rel="stylesheet" type="text/css" href="/assets/small-round-button.css">
<link rel="stylesheet" media="all" href="/assets/hover.css">


<script type="text/javascript" src="/assets/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/scroll.min.js"></script>
<!--<script type="text/javascript" src="js/jquery.transition.min.js"></script>-->
<script type="text/javascript" src="/assets/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/assets/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/assets/jquery.advancedSlider.min.js"></script>
<script type="text/javascript" src="/assets/simplyScroll.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.marquee.js"></script>
<script type="text/javascript" src="/assets/jquery.pause.min.js"></script>
<script type="text/javascript" src="/assets/jquery.webticker.js"></script>
<script type="text/javascript" src="/assets/engine.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/assets/jquery.cookie.js"></script>


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


<!-- start soundmanager2 -->
<!-- demo, make the fonts nicer etc. -->


<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="/assets/flashblock.css" />

<!-- soundmanager required -->
<link rel="stylesheet" type="text/css" href="/assets/360player.css" />
<link rel="stylesheet" type="text/css" href="/assets/360player-visualization.css" />

<!-- sound manager Apache-licensed animation library -->
<script type="text/javascript" src="/assets/berniecode-animator.js"></script>

<!-- soundmanager core stuff -->
<script type="text/javascript" src="/assets/soundmanager2.js"></script>
<script type="text/javascript" src="/assets/360player.js"></script>

</head>

The javascript in question within the application.html.erb file is between two script tags right before the body closing body tag. It's quite lengthy so I omitted it for the time being.

I understand RoR has some conventions as far as the asset pipeline, and I'm assuming I'm missing some ruby syntax here, but I am used to just referencing the file paths and having everything working. Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function? Right now it is just referenced as:

   <body>
     .
     .
      <script>
        .
        .
        .

      </script>
   </body>
</html>

Thanks guys! Any help is appreciated.

My application.js file:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

application.css file:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

max · Accepted Answer · 2015-07-23 17:32:58Z

2

In Rails you should organise your assets as follows:

app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.

lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.

vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks. Keep in mind that third party code with references to other files also processed by the asset Pipeline (images, stylesheets, etc.), will need to be rewritten to use helpers like asset_path. http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Rails uses Sprockets for an assets pipeline - Sprockets takes all your scripts and concatenates and minifies them in production - which is vital for good performance.

So first move all those libs to /vendor/assets and then you can include them in your application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui
//= require scroll
//...
//= require_tree .

So instead of having a million script tags in your layout you would use

<!DOCTYPE HTML>
<HTML>
  <head>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <title>The Atmosphere</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

What the Rails helper methods javascript_include_tag and stylesheet_link_tag do is that they create a separate script/link tag for each file in sprockets manifest in development so that you get a usable line number for debugging. In production they link to a concatenated minified version with a fingerprint which helps avoid cache issues.

While this might sound confusing at first it does solve several real word problem and is a pretty solid workflow. And spending a little time learning it will definitely pay off.

If you want to be stubborn and manually write script tags you will need to place your assets in /public/assets.

Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function?

If you are talking about an inline script tag then there is no special syntax required. But mixing javascript into your html is a pretty shoddy practice.

You can easily include a script on a single page by javascript_include_tag 'foo'.

edited Jul 23, 2015 at 17:32

answered Jul 23, 2015 at 17:22

max

103k15 gold badges113 silver badges177 bronze badges

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

2 Comments

user3700231 Over a year ago

Alright so I have moved all of my javascript assets to vendor and added the //= require 'foo' syntax to the application.js file, but I still can't get my inline javascript to work in the application.html.erb file. I have tried moving it to its own js file and I have also tried wrapping the script tags like below but with no luck. Any reason why? <%= javascript_tag do %> (javascript) <% end %>

max Over a year ago

Do you have a syntax error in the inline javascript or somewhere along the the way? Check the browser console.

NM Pennypacker · Accepted Answer · 2015-07-23 17:08:52Z

1

The Railsy way of including javascript is to use:

<%= javascript_include_tag( 'your_script' ) %>

More docs here: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag

application.js is just a list of files that will be precompiled with the asset pipeline, so you can include the scripts there as well, but if you just want to add a script to a particular view, this is the way to go.

answered Jul 23, 2015 at 17:08

NM Pennypacker

6,99211 gold badges38 silver badges41 bronze badges

2 Comments

user3700231 Over a year ago

Excellent, so I would replace the <script type="text/javascript" src="file_name.js" charset="utf-8"></script> syntax with the code you added above. What about for code directly within the view. I read that you can create a separate file and copy and paste and include it like we did above, but what would the syntax be if I wanted to keep it within the application.html.erb file?

NM Pennypacker Over a year ago

No change in syntax. As long as you use it in a view, javascript_include_tag will automatically assume the file is in assets/javascripts

Collectives™ on Stack Overflow

Working with javascript in a view in ruby on rails

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related