I am using JQuery-UI to display the datepicker on a simple rails form. In my local development environment it works as expected, but when I deploy to the production environment it will not display.
Gem File includes:
gem 'rails', '4.0.3'
gem 'sass', '~> 3.2.5'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '4.0.1'
gem 'sprockets', '2.11.0'
em 'jquery-rails', '3.1.0'
gem 'jquery-ui-rails', '5.0.3'
gem 'turbolinks', '1.1.1'
My application.js
//= require jsapi
//= require chartkick
//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require bootstrap-sprockets
//= require holder
//= require jquery.dataTables.min
//= require dataTables.bootstrap
//= require highcharts.js
//= require_tree .
My application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "partials/*";
#import "customer/*";
#import "jquery-ui/datepicker";
The form contains:
<div class="row">
<label class="control-label col-xs-3">Start Date :</label>
<div class="col-xs-2">
<%= f.input :start_date, :as => :datepicker, :label => false %>
</div>
</div>
<div class="row"><label class="control-label col-xs-3">End Date :</label>
<div class="col-xs-2">
<%= f.input :complete_date, :as => :datepicker, :label => false %>
</div>
</div>
I have a dates.js.coffee file as follows:
$ ->
$("input.datepicker").each (i) ->
$(this).datepicker
altFormat: "yy-mm-dd"
dateFormat: "dd/mm/yy"
altField: $(this).next()
Any help would be fantastic...
Thanks to japed for pointing me in the right direction. I was inadvertently loading a JS file (gruntfile.js) via the asset pipeline that was not loading correctly and causing the rest of the JS to not load. I removed this file and all is working as expected.
Related
just getting started with a Rails 5 side project. Having some issues getting an out of the box Navbar showing correctly.
It's all squished up, as per the screenshot attached. Any thoughts?
I've attached the relevant code below.
Thanks in advance!
application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/navigation' %>
<%= yield %>
</br></br>
<%= render 'layouts/footer' %>
</body>
</html>
navigation - Navbar
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# 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 navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'devise'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
gem 'sqlite3', '~> 1.3.6'
gem 'byebug', '11.1.3', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
group :production do
gem 'pg', '1.2.3'
end
application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap-sprockets";
#import "bootstrap";
In you gem file your have included multiple bootstrap related gem, i.e
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
i am not sure if all are needed but to implement bootstrap in rails 5 following this method is sufficient.
This is my rails 5 project's bootstrap setup
in Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
some version of bootstrap gave me problem, this works fine for me, please check if its same for you
in application.js include jquery popper and bootstrap on top, like this.
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
in application.scss
only do
#import "bootstrap";
do rails assets:precompile and restart rails server to be sure.
and the bootstrap should work fine, at least it works for me, and i hope it helps you some.
As indicated in doc Bootstrap Javascript depends on jquery, it's installed via your Gemfile but you should add Bootstrap dependencies and Bootstrap to your application.js:
//= require jquery3
//= require popper
//= require bootstrap
I started to program with ruby on rails and I tried to import bootstrap to my Ruby On Rails and I tried to insert an navbar to my app and thats the result:
Only text styles work
As you can see only the text style works..
My Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record gem 'sqlite3'
# Use SCSS for stylesheets gem 'sass-rails', '~> 5.0'
# 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' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
# 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
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'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'
end
My application.css.scss:
#import "bootstrap";
#import "bootstrap-sprockets";
My application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
My application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<%= yield %>
</body>
</html>
Thank you in advance!
Try writing
//= require bootstrap.min
In your application.js
You are using bootstrap-sass, so you need sass-rails gem. From the bootstrap-sass
In your Gemfile you need to add the bootstrap-sass gem, and ensure
that the sass-rails gem is present - it is added to new Rails
applications by default.
That said, add gem sass-rails in your Gemfile, then bundle install and restart the server
Update:
Also, you need to import bootstrap-sprockets before the bootstrap.
#application.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
I think it might be the fact that you have the gem 'bootstrap-sass' in the development group. This should go in the root of the Gemfile.
I am trying to learn Rails and during this time I wanted to make my pages a little more stylish. To do so I went ahead and downloaded Bootstrap 4 and followed all the installation instructions I could find. To test it I tried to add a simple navigation bar. The bar loads all the text fine but there is no CSS applied to it :(
All the bootstrap css and js files are in assets/stylesheet and /javascript
At this point I am not too sure what I am doing wrong or what needs to be changed. I am guessing it is something simple.
Gemfile
gem 'rails', '4.2.4'
gem 'execjs'
gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '~> 1.8.0'
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'jquery-rails'
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', media: 'all', "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
This is my
/assets/stylesheets/application.scss
#import "bootstrap";
This is my /assets/javascript/application.js
//= require jquery
//= require bootstrap
//= require bootstrap.js
//= require bootstrap.min.js
//= require jquery-3.1.1.min.js
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Thank you
I Think I found the issue.
I had two sass entries in the gemfile
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'
I commented out sass-rails and everything started working.
I'm running a Rails project which consists of Navgation bar on all the pages. I also have a input tag on the nav bar for searching purpose, but how to implement autocomplete in the particular search bar.
I tried using rails-jquery-autocomplete and implemented the way it asked but unfortunately it didn't worked for me. No search result are visible on screen or on console
brands_controller.rb
class Admin::BrandsController < Admin::AdminController
autocomplete :brand, :name
end
routes.rb
resources :brands, param: :uuid do
get :autocomplete_brand_name, :on => :collection
end
_navigationbar.html.erb
<form class="navbar-form pull-left" role="search">
<div class="form-group">
<input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="<%=autocomplete_brand_name_admin_brands_path%>">
</div>
</form>
Gemfile
gem 'rails', '~> 5.0.0'
gem 'rails-jquery-autocomplete'
gem 'jquery-rails'
application.js
//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require autocomplete-rails
Generated HTML:
<div class="form-group">
<input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="/admin/brands/autocomplete_brand_name">
</div>
You are missing //= require jquery-ui/autocomplete in application.js. Update application.js to
//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require jquery-ui/autocomplete
//= require autocomplete-rails
In your gemfile add
gem 'jquery-ui-rails'
Also replace input tag with
<%=autocomplete_field_tag 'search', '', autocomplete_brand_name_admin_brands_path %>
I am trying to load the gem from bootstrap and display a navbar on my page but it doesn't seem to work.
gemfile code
source 'https://rubygems.org'
gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'bootstrap-sass'
group :doc do
gem 'sdoc', require: false
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.css.scss
#import 'bootstrap';
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Etsydemo</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<div class= "container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
_navbar.html.erb
<nav class="navbar navbar-default navbar-fixed-top">
Toggle navigation
Etsydemo
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Contact</li>
<li>About</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
application.js
//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require turbolinks
//= require_tree .
I think you need to import bootstrap sprockets as well as bootstrap. So the top of your application.scss file should have:
#import 'bootstrap-sprockets';
#import 'bootstrap';
Try reorganizing your application.js (assuming you have the bootstrap.js loaded into the asset pipeline...if you have the minified version it would be bootstrap.min)
//= require jquery_ujs
//= require jquery
//= require turbolinks
//= require bootstrap
//= require_tree .