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
*/
2 answers
solution1
1 2015-07-23 17:08:52
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.
solution2
1 2015-07-23 17:22:52
In Rails you should organise your assets as follows:
app/assetsis for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.lib/assetsis 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/assetsis 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' .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.