For a JavaScript library that doesn't have a rubygem version, how do I install it in Rails?
I checked the Rails Guide, and neither Working with JavaScript in Rails nor The Asset Pipeline seem to explicitly address how to install JavaScript libraries.
Add the javascript files to your app/assets/javascripts folder.
> cp my_js.js path/to/my_rails_app/app/assets/javascripts/
Make sure that the layouts that need the file contain a line to include the application javascript:
# app/views/application.html.erb
<%= javascript_include_tag 'application' %>
And in your application.js file, make sure the tree is required in the comments:
# app/assets/javascripts/application.js
...
//= require_tree
Restart your server, and the javascript should now be included
If you have just an one file, then you can copy and past it into app/assets/js folder. require_tree should cover for you, which is that in layouts/application.html.erb this line <%= javascript_include_tag 'application' %> will include everything.
# app/assets/javascripts/application.js
...
//= require_tree .
If you would like to use bower, then set it to vendor folder. and add into appl..js file like below.
# app/assets/javascripts/application.js
//= require angular
//= require angular-cookie
//= require angular-animate
//= require angular-ui-router
//= require angular-bootstrap
//= require bootstrap
Related
Basically, exactly as the title says. I have a gem installed that gives me some JS to use. This wasn't a problem before as I was using Sprockets + Assets pipeline.
Now, I migrated to jsbundling-rails and have literally no idea how to include that JS code provided by gem. I've spent like 10 hours searching and no luck so far.
Please, help me.
The gem would have to have a js package that can be installed with yarn/npm so that it can be imported in application.js. If it doesn't, you can setup a js file to be processed only by sprockets, like in the old days.
Add another javascript entry point that will skip esbuild and will be processed only by sprockets.
Update manifest:
// app/assets/config/manifest.js
//= link custom.js
Add //= require directive:
// app/assets/javascripts/custom.js
//= require gem_javascript
Add it to layout:
<!-- app/views/layouts/application.html.erb -->
<%= javascript_include_tag "application", "custom", "data-turbo-track": "reload", defer: true %>
Alternatively, instead of using //= require add gem_javascript to javascript_include_tag:
<%= javascript_include_tag "application", "gem_javascript", "data-turbo-track": "reload", defer: true %>
Might have to add it to manifest as well for precompilation:
// app/assets/config/manifest.js
//= link gem_javascript
I'm working on a website that uses HTML, CSS, and JavaScript with jQuery plugins. In order to make the website more dynamic, I shifted my code to Ruby on Rails. The HTML and CSS are fine, but some of the jQuery plugins that I had working before aren't functioning anymore.
I tried multiple ways to fix this. I first added the javascript files into app/assets/javascripts and then added //= require pluginfilename in application.js and then <%= javascript_include_tag name..... %> but that didn't work.
Is there something that I'm missing or doing wrong? I'm fairly new to Rails. This is version 4.2.3 btw.
Edit: this is 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 bootstrap.min
//= require turbolinks
//= require countdown
//= require grid
//= require custom
//= require script
//= require_tree .
First thing I would do would be to try and find a version of the plugin that's distributed via CDN, then including it via <%= javascript_include_tag link %>.
Barring that...
Did you do a //= require pluginfilename without the extension? Can you paste in your application.js file so we can take a look?
Also, what errors are you getting your JS console? Are you ensuring that the plugin is being loaded before it's being used? (Load order in the application.js file matters.)
You can find a bridge between Bower and Rails with Rails-Assets.org. I've used this for several projects and it works nicely. If your plugins are using bower, they should exist on Rails-Assets.org
I placed the bootstrap css and js files in their respective directories app/assets/stylesheets app/assets/javascripts
and modified application.js and application.css to include the bootstrap files respectively
application.css:
/*
*= require_self
*= require_tree .
*= require bootstrap.min
*/
application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require_tree .
The css is loading fine while the javascript is not. So things like dropdowns do not work.
Did I miss something
EDIT ANSWERED!:
My low rep won't allow me to answer my own question so I will posted it here:
By removing
//= require_tree .
from application.js and instead specifying the bootstrap.min.js file fixed the problem.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
I made a quick test rails app with a static homepage and installed the bootstrap files again and got the same issue. I originally thought that other files in my javascripts directory were conflicting with bootstrap.js and bootstrap.min.js but they were not as I was able to replicate this problem on a new barebones app.
You probably shouldn't be requiring both the bootstrap files in your application.[js/css] file, if you have already placed said files in your app/assests/[javascripts/stylesheets] directories, because anything within those directories will automatically be included by the require_tree . line in the application.[js/css] files. This is the "newer" rails asset pipeline, which will take all of the required js/css and minify it into a single js file and single css file. The require_tree . directive requires all the files within the "tree" of the assets/[javascripts/stylesheets] directory in question.
From the explanation in 1, you probably gathered that you shouldn't remove the require_tree . lines from your application. files
Simply add back in the require_tree . lines into both the application. files, and then make sure that both bootstrap files are in their respective assets/ directory.
Cheers!
I cannot get any javascript to run when my Ruby on Rails project is in deployment mode. I have a js at vendor/assets/javascript/theme/index-slider.js. It has an alert in this file to test that the javascript is working:
alert('TestTestTest');
When I run the project in the development mode, all the javascript runs properly. Additionally, if I add <script>alert("Testme");</script> to my index.html.erb file, that javascript runs in production mode.
I have been running rake assets:precompile and RAILS_ENV=production rake assets:precompile when making changes as well as restarting the server
How can I get Javascript to run in Production mode? (Also I am rather new to Ruby on Rails so I am not sure which files/information I should include to be helpful.) Thanks.
application.js
// 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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap/bootstrap
//= require theme/bootstrap.min
//= require theme/flexslider
//= require theme/index-slider
//= require theme/jquery.countdown.min
//= require theme/jquery.isotope.min
//= require theme/theme
//= require_tree .
I've found that the issue lies in the application.js file. I've added bootstrap into my project by hand as well as a boostrap theme. I've found that for whatever reason, the //= require bootstrap/bootstrap line should not be included above the theme I have chosen.
You need to compile assets for your production as well
rake assets:precompile RAILS_ENV=production
I am new to Rails. I followed the documentation and this example: Using Chartkick in Rails 4.0
but I cannot get Chartkick to work. I get undefined method pie chart. My js looks like this:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
I have tried including the javascript_include in both the application kayout and the show page. <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
Any ideas? Thanks all. I really do appreciate every bit of help I get here.
It turns out that, since Chartkick runs as an engine, I did not need to add // include chartkick into the application js file- I removed it and it worked like a charm. That means that the steps to get Chartkick to work in Rails 4 are:
add gem 'chartkick' to your Gemfile
add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb
Just add this to your chartkick's javascript_include_tag - 'data-turbolinks-track' => true. Also have a jquery-turbolinks gem installed (with it's correct structure of scripts requiring in application.js file). Finally restart the server.
write
#= require active_admin/base
require chartkick
in active_admin.js.coffee
and call direct jsapi from google like this in partial file.._items.html.ebr in app/views/items folder
javascript_include_tag "//www.google.com/jsapi", "chartkick"
pie_chart order, library: {pieSliceText: 'value'}
and then call this partial file like this
div class: 'custom-class' do
h3 'Items'
#item = Item.group(:menu_id).count #whatever data you pass to chart
render partial: 'items/items', locals: {item: #item}
end