Unable to load Bootstrap.min file - ruby-on-rails

I am trying to load bootstrap in my rails application. But it is not working. I had included the bootstrap and sass gems in my Gemfile. The following is my application.js file:
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I have also tried using bootstrap-cdn but it did not solve my problem. And I am unable to load bootstrap.min file in the application.
Thanks in advance.

Add .min after bootstrap or rails will search for bootstrap.js instead of bootstrap.min.js
//= require bootstrap.min
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
NOTE: Same applies for bootstrap.min.css

Related

How can I use the bootstrap utility functions in my rails app?

In my javascript console it works when I do this$('.collapse').collapse();,
but it does not work when I append it to the bottom of my application.js file.
My application.js file looks like this
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
Why doesn't it work when I add it to my application.js???
Thank you

Datepicker not working in rails

I am using jquery datepicker for my active admin. I upgraded my app from rails 4.6 to rails 5 then my app started to fail.
couldn't find file 'jquery-ui/datepicker' with type 'application/javascript'
I added gem 'jquery-ui-rails' gem and added //= require jquery-ui in application.js and *= require jquery-ui but still my problem didn't solved.
application.js
//= require_self
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery-ui/widgets/datepicker
in your application.js
//= require jquery-ui/widgets/datepicker
and restart your server
Update:
Rearrange your js as following and restart your server.
//= require_self
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui/widgets/datepicker
//= require_tree .
You may need to upgrade your 'active_admin_datetimepicker', so try to update your Gemfile with:
gem 'active_admin_datetimepicker', '=0.6.3'

Wrong path for js vendor/assets

application.js requires jquery-ui file from vendor/assets/jquery-ui/jquery-ui.min.js. But result is like that:
<script src="/javascripts/../jquery-ui/jquery-ui.min.js" data-turbolinks-track="true"></script>
All other js plugins works well, asset pipeline finds them. But can't find properly jquery-ui, jquery-block-ui and jquery-slimscroll
And how a regular script tag look like:
<script src="/assets/pace.min-6a1cbb46da15c9d3662ad8b47fd43ee9.js?body=1" data-turbolinks-track="true"></script>
Why Asset Pipeline can't find the right path for these plugins?
Application.js file is like that:
//= require jquery-2.1.4.min
//= require jquery-ui.min
//= require pace.min.js
//= require jquery.blockui
//= require js/bootstrap.min
//= require jquery.slimscroll.min
//= require switchery.min
//= require jquery.uniform.min
//= require js/classie.js
//= require js/main.js
//= require jquery.waypoints.min
//= require toastr.min
//= require jquery.flot.min
//= require jquery.flot.time.min
//= require jquery.flot.symbol.min
//= require jquery.flot.resize.min
//= require jquery.flot.tooltip.min
//= require curvedLines
//= require MetroJs.min
//= require modern
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The asset pipeline can not find your JS file because they simply don't exist i suppose. For this to work you would need a query-2.1.4.min.js file in your javascript folder for instance. I can see you don't have any issue with jquery_ujs so i suppose you are using the gem jquery-rails.
You should replace //= require jquery-2.1.4.min with //= require jquery2 as described in the following link: https://github.com/rails/jquery-rails#installation. On their page it is stated that jquery-ui is no longer included in the jquery-rails gem so you need to use gem "query-ui-rails" in your Gemfile to be able to include query-ui in application.js

Rails Application : Getting Sprockets::FileNotFound

**
Sprockets::FileNotFound at /
couldn't find file 'ckeditor-jquery'
(in /home/jeeva/Projects/Codebases/acu-arogya/app/assets/javascripts/application.js:16)
**
I am Using CKeditor in my rails application but i'm getting error in javascript
My application.js file contains:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require ckeditor-jquery
//= require twitter/bootstrap
//= require_tree .
One simple idea to try:
Swap the position of
//=require_tree .
with the position of
//= require ckeditor-jquery

gem jquery-ui-rails couldn't find file 'jquery.ui.all' (

I'm trying to add jquery ui datepicker to my application with help of jquery-ui-rails gem. I've checked Railscast I seem to do everything right, but i get an error upon application startup
couldn't find file 'jquery.ui.all'
Gemfile(end of it, tried to include gem in the assets group but no luck):
gem 'backbone-on-rails'
gem "jquery-ui-rails"
application.js
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require svitla_test
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .
//= require jquery.ui.all
application.css
*= require jquery.ui.all
*= require_self
*= require_tree .
At version 5.0 it has been changed. You can read more about it here.
version 5.0:
application.js:
//= require jquery-ui
application.css:
/*
*= require jquery-ui
*/
version 4.x (I'm sure about 4.2.0 and 4.2.1):
application.js:
//= require jquery.ui.all
application.css:
/*
*= require jquery.ui.all
*/
Put //= require jquery.ui.all right after //= require jquery so it will look like this
//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require underscore
//= require backbone
//= require svitla_test
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .
note that the order of which these lines are written is the order which these files are loaded.. So if you call a jquery-ui function before it knows what jquery-ui is, most likely you need to change the order a bit..
It is usually good to put infrastructure files before your own files to avoid these kind of problems

Resources