I have a template code CSS and JavaScript files and I need to use them in my Rails application in order to view a list of items.
How can I insert them into my application?
You insert your styles into the app/assets/stylesheets folder and JavaScript into app/assets/javascript folder.
You can either add the files, or paste the code into application.css and application.js.
Then require them at the top kinda like so:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
Related
I just installed the jQuery UI for my Ruby on Rails application. It runs Rails 5. I have looked at all the similar posts, but they do not apply to my case.
My page renders just fine, but in the Chrome dev tools console, I get this error:
I have rearranged the application.js file all kinds of ways and still get the same error. This is the 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, 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery-ui
//= require rails-ujs
//= require html.sortable
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap-sprockets
Per the comment above, try the require jquery at the top.
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .
jquery-ui requires you to have the default JQuery loaded beforehand. That's the reason you are seeing all those errors, as jquery-ui has references to it throughout its code, hence its throwing exceptions. Your application.js should look like this instead:
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require html.sortable
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap-sprockets
I am using rails 3.2.17 and ruby 1.9.3p484.
Gemfile:
group :assets do
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
gem 'coffee-rails'
end
My application.js requires:
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.form
//= require jquery.ui.all
//= require jquery.ui.sortable
//= require froogaloop
//= require redactor-rails
//= require redactor-config
//= require vimeo
//= require s3upload
//= require s3_direct_upload
//= require permission_check
//= require jquery.livequery
//= require local
Model name is episodes
I made a new JS file named episodes.js.coffee
my _show.html.erb is not responding to coffeescript / javascript / jquery. I've tried adding my JS code to application.js and also tried putting //= require episode on my application.js
It only works when I put JS code directly on views.
Any idea whats causing this?
As i mentioned it in my comment, you can't include a javascript_include_tag inside your partial, its proper place is in layout as that's where you head tag is. You can write page specific js though.
In your case you need to just write //= require_tree . inside your application.js file. It will automatically include all of your js files and if you want to specify your js files individually then you can do //= require episodes inside your application.js file
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!
What does the "//= require bootstrap/affix" in this .js code mean?
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
I assume it is in Rails application (or taken from it), in which case, //= is a directive for the javascript manifest files, to include the specified file.
you can read more about it here:
http://guides.rubyonrails.org/asset_pipeline.html
It's part of the rails manifest system in the Rails asset pipeline:
In JavaScript files, Sprockets directives begin with //=. In the above
case, the file is using the require and the require_tree directives.
The require directive is used to tell Sprockets the files you wish to
require. Here, you are requiring the files jquery.js and jquery_ujs.js
that are available somewhere in the search path for Sprockets. You
need not supply the extensions explicitly. Sprockets assumes you are
requiring a .js file when done from within a .js file.
It basically means when you precompile your assets, all the files you call using the //= directive will be compiled into the application.js file for you
You should read up about it here
I am trying to integrate a wrapbootstrap theme, that among other things has a folder of ~20 JS plugins:
My understanding is that rails 4 no longer allows you to put these plugins in vendor/plugins. Assuming this is true, what is the most efficient way to integrate ~20 plugins into an app? Do I need to move all CSS, JSS, images to their respective assets folders? This seems pretty cumbersome.
Appreciate the help.
You will need to take all .js file and put into app/assets/javascripts folder and take all .css file and put into app/assets/stylesheets folder. After you moved the following file, you need to update your application.js and application.css and reference it
Take a look at mine for example:
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery.datetimepicker
//= require bootstrap.min
//= require turbolinks
//= require jquery_nested_form
//= require_tree .
app/assets/stylesheets/application.css
/*
*= require bootstrap.min
*= require jquery.ui.all
*= require jquery.datetimepicker
*= require alert
*= require_tree .
*= require_self
*/