Rails comes with the jquery-ujs gem. In the src of this gem, there is a file called rails.js, which contains the functionality of the ajax. I have the gem loaded in my app and it works. I have the following in application.js:
//= require jquery
//= require jquery_nested_form
//= require jquery_ujs
However, in the Network tab in chrome, I see all the javascript files of my app. But when I search for rails.js, it does not appear. How could this be possible? Is the files of the gem precompiled by default? Is in a file with another name?
I think the rails.js is compiled and merged on application.js. Try open application.js on network and with ctrl + f find this jquery-ujs has already been loaded!
[edit]
I create a new rails project with version 5, and I can see the rails ujs on network tab:
see the image here
Change this on your enverioment file:
config.assets.debug = true
[edit 2]
Image with rails 4
couldn't find file 'jquery-ui/datepicker' with type 'application/javascript'
Checked in these paths:
/Users/jsbae/Desktop/unisports/app/assets/config
/Users/jsbae/Desktop/unisports/app/assets/images
/Users/jsbae/Desktop/unisports/app/assets/javascripts
/Users/jsbae/Desktop/unisports/app/assets/stylesheets
/Users/jsbae/Desktop/unisports/vendor/assets/javascripts
/Users/jsbae/Desktop/unisports/vendor/assets/stylesheets
This is what is happening when I try to run the rails server. I have checked my gem list and can see I have:
jquery-rails (4.2.2, 4.2.1)
jquery-turbolinks (2.1.0)
jquery-ui-rails (6.0.1, 5.0.5)
jqueryui_rails (0.0.4)
I have seen a lot of posts on problems with the versions, so I also tried to downgrade jquery-rails and jquery-ui-rails, but when running the commands such as:
gem install 'jquery-rails','~>2.3.0' OR gem install 'jquery-ui-rails', '~> 4.2.1'
But they constantly send me errors like:
ERROR: Could not find a valid gem 'jquery-rails-2.3.0' (>= 0) in any repository
ERROR: Possible alternatives: jquery_rails3, jquery-rails, jquery-rails-cdn, jquery-rails_vho, jquery-rails-aristo
I have also tried editing the application.js and application.css files with
*= require jquery-ui' & '//= require jquery-ui
You need to specify jquery-rails or jquery-ui-rails in the Gemfile
gem 'jquery-rails'
# gem 'jquery-ui-rails'
The easy way to solve your problem is:
Download jquery-ui from http://jqueryui.com/download/
Exact and copy jquery-ui.min.js to app/assets/javascripts/ and jquery-ui.min.css to app/assets/stylesheets/
In application.js and application.css, make sure that you have this line:
//= require_tree . and *= require_tree .
I am trying to get bootstrap javascript working in my rails 4 app.
I asked these questions but haven't been able to get any help.
https://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs
https://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker
I am increasingly feeling defeated by this challenge. It's depressing that bootstrap is described as a simple tool for rails. I would be happy to pay USD100 if someone could help be solve this problem.
My problem is specifically with the javascript functions. My tabs don't work. When you click the link, nothing happens. Also, the date picker doesn't work (I was expecting a calendar to pick a date in a single click).
In my gem file I have:
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'jquery-rails'
In my application.html.erb, I have:
<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
<title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.youtube.com/iframe_api"></script>
Turbolinks is off because i use olark.
In my stylesheets folder, I have files called:
application.css.scss:
*= require_framework_and_overrides.css.scss
*= require bootstrap-datepicker
*= require_self
*= require_tree .
*/
Following comments set out below, I changed this file to be named application.scss and changed the order and referencing to:
*= require_tree .
*= require_self
*= require framework_and_overrides.css.scss
*= require bootstrap-datepicker
*/
framework_and_overrides.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "bootstrap-slider";
In my javascript folder, I have a file called:
application.js:
//= require jquery
//= require jquery_ujs
//= require underscore
//= require gmaps/google
//= require bootstrap-slider
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .
project_dates.coffee.js
$(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
- $(this).datepicker
- format: "dd-mm-yyyy"
- weekStart: 1
- autoclose: true
Then, In my view I am trying to use bootstrap tabs, so that clicking on a tab renders a partial beneath the links bar:
<div class="containerfluid">
<div class="row" style="margin-top:50px">
<div class="col-xs-10 col-xs-offset-1">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"> Terms</li>
<li role="presentation"> Privacy</li>
<li role="presentation"> Licence</li>
<li role="presentation"> Trust</li>
<li role="presentation"> Reliance</li>
<li role="presentation"> Pricing</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px">
We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
<div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>
<div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
<div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>
<div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
<div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>
</div>
</div>
</div>
</div>
Nothing at all happens when you click on the links.
In my project dates form, I have this form field:
<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>
It does not make a date picker. Instead it's just three separate fields for d/m/y. Also, the label doesn't display -but I can work around that problem.
Is there something wrong with my setup?
When I change my application.js to remove:
//= require bootstrap
Then the js works so that when you click one of the tab links across the top, it jumps down a long page of text to the point where the relevant text starts. That's not what I want. I want to click on the tab link and for that to cause the relevant partial to render beneath the links (and all of the other partials not to render).
There are no changes to the date picker problem that result from this change to the application.js
When I try adding:
Bundler.require(:default, Rails.env)
to my config/application.rb (as per this post Bootstrap-sass gem Javascript not Working in Rails 4)
I get no different result to the problems outlined above
When I try adding
//= require bootstrap-sprockets
to my application.js (after jquery), the js stops working - so that when i click the link in the tabs menu, nothing at all happens
I am aware the user guide for https://github.com/twbs/bootstrap-sass says:
bootstrap-sprockets and bootstrap should not both be included in application.js.
For that reason, I removed bootstrap from my application.js.
I am also aware that the user guid for that gem says:
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
I still have this in my application.css.scss:
*= require_framework_and_overrides.css.scss
*= require bootstrap-datepicker
*= require_self
*= require_tree .
*/
I read the gem documentation as meaning I am doing something wrong by keeping these require files in my css - but the gem documentation doesnt tell you what to use instead.
It says:
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
How do you do this?
Entire gem file is copied below:
source 'https://rubygems.org'
# ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# ------------------ Use postgresql as the database for Active Record
gem 'pg'
# ------------------ Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
# ------------------ Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# ------------------ Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# ------------------ See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# ------------------ Use jquery as the JavaScript library
gem 'jquery-rails'
# ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'
# ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# ------------------ bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# ------------------ Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# ------------------ Use Unicorn as the app server
# gem 'unicorn'
# ------------------ Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# ----------- USERS
# ------------------ authentication
gem 'devise', '3.4.1'
gem 'devise_zxcvbn'
gem 'omniauth'
gem 'omniauth-oauth2', '1.3.1'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-linkedin-oauth2'
gem 'google-api-client', require: 'google/api_client'
# gem 'oauth2'
# ------------------ authorisation
gem 'pundit'
# ------------------ user roles
# ------------------ messaging
# ------------------ money
gem 'money-rails'
# ----------- CONTENT
gem 'state_machine'
gem 'acts_as_approvable'
# ------------------ file uploads
gem 'carrierwave'
gem 'mini_magick'
gem 'simple_form'
# ------------------ video
gem 'yt', '~> 0.25.5'
gem 'vimeo'
# ------------------ organisation
gem 'acts-as-taggable-on', '~> 3.4'
# ------------------ search
# ----------- OTHER
# ------------------ security
gem 'figaro'
# ------------------ performance
gem 'rails-observers'
gem 'high_voltage', '~> 2.4.0'
# ------------------ location
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'country_select'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :production do
gem "rails_12factor"
end
ruby "2.2.2"
Watching this video - https://gorails.com/episodes/styling-with-bootstrap-sass
The setup appears super simple, but this tutorial does not amend the file to remove references to require as the gem documentation suggests (but which I have not done) but this tutorial still works to get bootstrap working. Is there ANYTHING anyone can see that I might try? On the brink...
As you can see - I have been trying at this for more than a year. I've been to monthly meet ups, paid code mentors and hired contractors who haven't been able to help. Hoping for a miracle on this board.
Bootstrap Sass with Rails 4
TRYING RESCUE SOLUTION BELOW:
So, I now have:
stylesheets as follows:
application.css
*= require_tree .
*= require_self
*/
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
framework_and_overrides.css.scss:
#import "font-awesome-sprockets";
#import "font-awesome";
#import "bootstrap-slider";
javascript files as follows:
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
<%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => false %>
gemfile:
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
When I save all of this and complete the suggested steps, there is no change to the above. I click a link in the tab links across the top, the little box at the bottom of the screen says 'go to #[name of link tab] on this page, but nothing happens.
You are in configuration hell, and I have built a minimal working product to get you out of there. In order to achieve this, we tackle your problems in order of their appearance and do not try to solve them in parallel. This answer focuses on your first question and probably solves the others.
The copy of the project's Readme follows. In case you need access to the product, just let me know.
README
This is a demo application to help stackoverflowuser "user2860931" with issues
as mentioned here.
Questions are listed in chronological order:
[Q1] November, 13
Rails with Bootstrap Tabs
[Q2] November, 22
Rails 4 - Bootstrap date picker
[Q3] November, 24
Rails - Bootstrap setup
Problem Description
Many configuration attempts have been made and a suboptimal development
environment probably interrupted rails naming conventions by adding file
extensions.
Versions Used
Rails 4.2.5
Steps To Create This Application By Yourself
First check for an appropriate rails version
$ rails --version
Make sure the development environment (IDE) does not add file extensions by itself
Creating a new rails application
$ rails new rescue
Locate the Gemfile of the application created under 1. and comment out
the turbolinks gem entry
Remove explanatory links for visual clarity
Add the following lines to you Gemfile (one might want to fix gems to a
particular version in order to avoid an application to stop working by an
unplanned update, but this is another issue)
gem 'bootstrap-sass' #, '3.3.5.1'
Run
$ bundle exec bundle update
$ bundle exec bundle install
Create the file app/assets/stylesheets/custom.css.scss and add the following
lines:
#import "bootstrap-sprockets";
#import "bootstrap";
Add the following line to app/assets/javascripts/application.js
//= require bootstrap
IMPORTANT: This line has to follow the lines of jquery and jquery-ujs and
before the require_tree directive so that the resulting file looks like:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
NOTE: We have deleted the line for turbolinks, to reflect the production
system's setup of user "user2860931" (stackoverflow).
After saving all edited files, check whether the development environment
has altered the file extensions (just to be sure this time)
.
├── app
│ ├── assets
│ │ ├── images
│ │ ├── javascripts
│ │ │ └──application.js
│ │ └── stylesheets
│ │ ├── application.css
│ │ └── custom.css.scss
Generate a minimal controller together with action and related view
$ rails generate controller planets index
Start the server
$ rails s
Visit in your browser
http://localhost:3000/planets/index
Last step to remove turbolinks completely
View the HTML sourcecode of the site mentioned under 11.
From file app/views/layouts/application.html.erb remove all
data-turbolinks-track attributes so that the ERB code looks like:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
Repeat step 1. and note the difference
Visit the file app/views/planets/index.html.erb and replace with your HTML
as listed in [Q1]
This setup renders your partials under the correct tabpanel. Be advised that
that you are working in the development environment of Rails. A call to
$ rake assets:clean
$ rake assets:precompile
could be needed in order to see changes once you deploy your main project (it should not be needed in Rails development mode).
Tip: Use mock data files as arguments for the render function.
app
│ └── views
│ │
│ └── planets
│ ├── _dummy00.html.erb
│ ├── _dummy01.html.erb
│ ├── _dummy02.html.erb
│ ├── _dummy03.html.erb
│ ├── _dummy04.html.erb
│ ├── _dummy05.html.erb
and use calls to render 'planets/dummy05' in your HTML of Q1. Make sure each dummy file contains slightly different data, in order to be able to check for working tabs.
The mock-up result provides tabs via bootstrap and looks like this .
Tabs are working as expected.
By providing you with the minimal working product, you should be enabled to bring your setup to a working state.
After all the preparation, adding a datepicker by just following the official documentation works, which answers Q2:
Sources Used To Provide This Answer
https://www.railstutorial.org/ by Michael Hartl
http://getbootstrap.com/components/#nav
http://getbootstrap.com/javascript/#tabs
http://getbootstrap.com/javascript/#tabs-usage
http://guides.rubyonrails.org/asset_pipeline.html
I encountered the same issue you do and found a solution (digging in the deep web) that worked for me. Try adding the requirements after the line require_tree . in the .css file, and in the .js file just the datepicker you use; as below:
application.css
...
*= require_tree .
*= require_self
*= require bootstrap
*= require bootstrap-datepicker
*/
application.js
...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require bootstrap-datepicker
It is related to the asset pipeline of Ruby on Rails, you can go further on this topic in this page http://guides.rubyonrails.org/asset_pipeline.html , but first try changing the order of the lines.
I have a rails 4 application in which we are using cloudfront as the CDN.
In the production.rb file, we have the following code:
config.action_controller.asset_host = "example3579.cloudfront.net"
We have done some pretty thorough asset separation. This may not be advisable from an asset pipeline standpoint, but it should make debugging this issue pretty easy.
The particular page I'm working on is the users#edit view, but the problem is universal.
The users#edit action uses it's own layout: views/layouts/user_edit.html.erb
The views/layouts/user_edit.html.erb file calls this javascript.
<%= javascript_include_tag 'user_edit'%>
assets/javascripts/user_edit.js
//= require jquery
//= require jquery_ujs
//= require jquery.validate.min
//= require ./webarch/form_validations
On the localhost, this works. I can access the js in the browser like this:
http://localhost:3000/assets/user_edit.js
But on production with heroku, the site looks for this file:
<script src="http://example3579.cloudfront.net/javascripts/user_edit.js"></script>
The file doesn't work. I can't access in the browser and the javascript does not render on the page. I have precompiled the assets.
Add gem 'rails_12factor', group: :production # Helpful for rails 4 assets on heroku
And in /config/environments/production.rb
config.assets.compile = true
This should work
when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
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 turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).