Bootstrap4 with Rails 5 - ruby-on-rails

I followed the official guide and this post to no help, can someone shed some light on this? (source on github)
My Gem file:
...
#bootstrap
gem 'bootstrap', '~> 4.0.0.alpha3.1'
gem 'sprockets-rails', :require => 'sprockets/railtie'
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
...
my application.scss:
#import 'bootstrap-sprockets';
#import 'bootstrap';
my application.js:
//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>DankDist</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
and Finally, my index.html.erb:
<h1>Scale#index</h1>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<p>Hello Worldzz</p>
<p>Find me in app/views/scale/index.html.erb</p>
<%= params[:id] %> <br/>
<%= #id %>
Next Page <%= #page +1 %>
<hr/>
<%= params.inspect %>
I ran Bundle, and re-tried rails s with no changes, the header doesn't contain any styles.

There's a few mistakes
ScaleController contains layout false - therefore your stylesheet import in your application.html.erb doesn't work
#import 'bootstrap-sprockets'; is not necessary for the Bootstrap 4 gem

in application.js, try to line these two lines as follows, i noticed it worked for me:
//= require jquery
//= require bootstrap-sprockets

Related

Uncaught TypeError: $(...).daterangepicker is not a function Rails

Ive been working on adding daterangepicker (https://www.daterangepicker.com/#usage) to a rails app, and successfully got it working. However today, out of nowhere, Ive started getting the Uncaught TypeError: $(...).daterangepicker is not a function error in my console, and the page breaks. I havent changed my application.js, gemfile, nor stylesheets since it was working, hoping to get some assistance here. From doing some research it seems that the function is being loaded before jquery is, but I am mystified as to why this is happening.
Gem file:
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'bootstrap', '~> 4.3.1'
gem 'momentjs-rails'
gem 'bootstrap-daterangepicker-rails'
application.js
//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require moment
//= require bootstrap
//= require daterangepicker
//= require_tree .
application.scss
*= require jquery-ui
*= require daterangepicker
daterangepicker.js
$(function() {
$('.daterange').daterangepicker({
opens: 'left',
locale: { format: 'YYYY/MM/DD'}
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( daterangepicker.js )
View:
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<%= javascript_include_tag "daterangepicker.js" %>
<%= form_with scope: :export, url: history_export_path, remote: true do |f| %>
<%= f.text_field :created_at_range, :class => 'form-control daterange', value: #created_at_range %>
<%= f.submit "Filter Histories"%>
<% #export.date_scope(#start_date, #end_date).order(sort_column + " " + sort_direction).each do |history| %>
<tr>
<td><%= history.success %></td>
<td><%= history.message.to_s %></td>
<td><%= history.created_at %></td>
</tr>
<% end %>
<% end %>
First think your daterangepicker js file has confusion with the daterangepicker plugin file. rename it or add a script tag at the end of your view file.
add javascript_include_tag and stylesheet_link_tag to application.html.erb
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
delete script tags, link tag and javascript_include_tag 'daterangepicker' your view, they are not necessary if you add dependency in your application.js and application.css

Ruby on rails bootstrap css js working but not found

I have a rails application which I added the bootstrap gem
first I added this two gems
gem 'bootstrap'
gem 'sprockets-rails', :require => 'sprockets/railtie'
which installed this packages
Using bootstrap 4.0.0.alpha3
Using sprockets 3.6.0
After I modified application.scss to
// Custom bootstrap variables must be set or import before bootstrap itself.
#import "bootstrap";
Then I left application.js like this
// 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 tether
//= require bootstrap-sprockets
//= require_tree .
//= require_self
Lastly my application.html.erb is this
<!DOCTYPE html>
<html>
<head>
<title>Squirm</title>
<%= stylesheet_link_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'partials/navbar' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Bootstrap seems to we working, but in the Google Chrome console seems not to be found
You're loading Bootstrap before you've loaded jQuery. Many of Bootstrap's components require javascript (carousel, tabs, etc.), however, most of Bootstrap will work without, which is why the Bootstrap CSS is showing on your page.
Loading Bootstrap after jQuery will fix the issue:
<!DOCTYPE html>
<html>
<head>
<title>Squirm</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'partials/navbar' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Also, not 100% sure based on your code, but you may be loading bootstrap twice. It seems this line: //= require bootstrap-sprockets is already loading Bootstrap.
you need to add jquery as well normally jquery come bundled in rails app, but maybe due to some reasons its not thr in your app
add
jquery from
https://cdnjs.com/libraries/jquery/
and let us knwo if this change works.

Setting up ChartKick - Ruby beginner

After reading http://chartkick.com/ I've tried to add chart to my website
Gemfile:
...
gem 'chartkick'
...
index.html.erb:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<h1>Hello, Rails!</h1>
assets/javascript/application.js:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
But all I've got is:
undefined method `pie_chart' for #<#:0x4e49bd8>
I use chartkick (1.2.4), ruby(1.9.3), rails (4.1.0). What should I do?
I would need to look into chartkick further if this isn't the fix, but restart your Rails server and try again.
I had the same issue, for Chartkick to work I had to put the:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
in the the application.html.erb file only not the index file, under the head attribute
<head>
...
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
</head>
And it was then usable in the whole application, we also found it to be more reliable when it was in the application.html.erb file.

Formtastic Install breaking Bootstrap CSS stylesheet

I'm using Rails 4. I'm installing formtastic and in the process following the Readme to make changes to the CSS. This is breaking my CSS - my pages are showing but without any formatting at all.
My Application.css file (I removed *= require_tree . per instructions on readme):
*= require_self
# app/assets/stylesheets/application.css
*= require formtastic
*= require my_formtastic_changes
# app/assets/stylesheets/ie6.css
*= require formtastic_ie6
# app/assets/stylesheets/ie7.css
*= require formtastic_ie7
In application.html.erb note I commented out the previous stylesheet and added in a new link:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%# stylesheet_link_tag "application",
"data-turbolinks-track" => true %>
<%= stylesheet_link_tag "application", "formtastic", "my_formtastic_changes" %>
<!--[if IE 6]><%= stylesheet_link_tag 'ie6' %><![endif]-->
<!--[if IE 7]><%= stylesheet_link_tag 'ie7' %><![endif]-->
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
I also added the stylesheet my_formtastic_changes.css.scss, an empty file. I experimented with adding/removing the formtastic and my_formtastic_changes references and using single and double quotes with the stylesheet references - no luck there.
I left the require_tree . line out but had to add in
*= custom
So it loaded the custom stylesheet, including the bootstrap CSS.

Error: Uncaught TypeError: Cannot read property 'Constructor' of undefined bootstrap-popover.js

I'd like to use twitter bootstrap manually, on my rails project.
But I've got this error, and some functions of bootstrap don't work.
If you help me, I appreciate it. Thank you.
Errors on Console
Uncaught TypeError: Cannot read property 'Constructor' of undefined bootstrap-popover.js:38
(anonymous function) bootstrap-popover.js:38
(anonymous function) bootstrap-popover.js:115
app/view/app/index.html.erb
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap-transition" %>
<%= javascript_include_tag "bootstrap-alert" %>
<%= javascript_include_tag "bootstrap-modal" %>
<%= javascript_include_tag "bootstrap-dropdown" %>
<%= javascript_include_tag "bootstrap-scrollspy" %>
<%= javascript_include_tag "bootstrap-tab" %>
<%= javascript_include_tag "bootstrap-tooltip" %>
<%= javascript_include_tag "bootstrap-popover" %>
<%= javascript_include_tag "bootstrap-button" %>
<%= javascript_include_tag "bootstrap-collapse" %>
<%= javascript_include_tag "bootstrap-carousel" %>
<%= javascript_include_tag "bootstrap-typeahead" %>
<!-- as example, which doesn't work, somehow -->
<i class="icon-search icon-home"></i>
I believe everything necessary js and css files are in
./app/assets/images
./app/assets/javascripts
./app/assets/stylesheets
If you would like to add asset files ( like .js , .css or images ) in Rails >3 , you should use manifest files : application.js , application.css . After you copy sources in their directories , you should make declarations like this :
application.js :
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-responcive
//= require tree .
and in application.css:
*= require_self
*= require bootstrap
*= require_tree .
It makes useless including `<%= javascript_include_tag %> in your views .

Resources