select2 and Bootstrap not styling input field elements in rails - ruby-on-rails

My input fields are not looking like they should, as per http://ivaynberg.github.io/select2/#documentation
Not only is the Bootstrap or select2 styling not applying to the input fields, I'm getting some funny duplicate behavior of the labels and forms here.
My unsubstantiated haunch is that Bootstrap isn't being properly registered or communicating with select2.
app/views/characters/_form.html.haml
= form_for(#character, :html => { :multipart => true }) do |f|
- if #character.errors.any?
#error_explanation
%h2= "#{pluralize(#character.errors.count, "error")} prohibited this character from being saved:"
%ul
- #character.errors.full_messages.each do |msg|
%li= msg
#stripe_error.alert.alert-danger{ :style => "display:none" }
%noscript JavaScript is not enabled and is required for this form. First enable it in your web browser settings.
.form-group
= f.label :name
= f.text_field :name, autofocus: true
.form-group
= f.label :image
= f.file_field :image
.form-group
= f.label :universe_ids, "Link Universes"
= f.collection_select :universe_ids, Universe.order(:name), :id, :name, {}, {multiple: true} # Getting a lot of funny behavior with these lines
.action
= f.submit
characters.js.coffee
jQuery ->
$("#character_universe_ids").select2(
placeholder: "Pick a Universe");
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
//= require bootstrap
//= require select2
//
//= require_self
//= require_tree .
//= require turbolinks
application.css.scss
#import "resets";
#import "bootstrap";
#import "custom/cp_variables";
#import "custom/cp_custom";
#import "custom/cp_responsive";
/*
*= require select2
*= require select2-bootstrap
*
*= require_self
*= require_tree .
*/
How would I be able to tell if the *= select2-bootstrap line is working properly?
I am using bootstrap-sass gem, not a copied library in the vendor assets folder.
gemfile
source 'https://rubygems.org'
ruby "2.0.0"
gem 'rails', '4.0.0'
gem 'haml-rails', '0.5.1'
gem 'html2haml', '~> 1.0.1'
gem 'sass-rails', '~> 4.0.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'uglifier', '>= 1.3.0'
gem 'turbolinks', '~>2.2.2'
gem 'jquery-turbolinks', '~>2.0.2'
gem 'jbuilder', '~> 1.2'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'pg', '0.17.1'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
gem 'nokogiri', '~> 1.6.0'
# Secret keys.
gem 'figaro', '~> 0.7.0'
# Images.
gem 'paperclip', '~> 3.0'
# Image storage.
gem 'paperclip-dropbox', '>= 1.1.7'
# Authentication.
gem 'devise'#, '3.2.3'
# Votes.
gem 'acts_as_votable', '~> 0.9.0'
# Autocomplete form.
gem 'select2-rails'
group :development do
# For html2haml mass conversion
# erubis is already included in action pack
gem 'ruby_parser', '~> 3.1.1'
end
group :test do
end
group :production do
gem 'rails_12factor', '0.0.2'
#gem 'aws-sdk', "~> 1.0"
end
# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
I couldn't find any threads of people having this problem. All the tutorials simply say to apply the simple .select2() method to the proper DOM element, but I'm simply not getting the styling that I should be getting.

Related

How to fix jquery-ui rails autocomplete error(turbolinks:load) in rails

I'm working on autocomplete part in rails. I am using 'jquery-ui-rails' gem. while using $(document).ready it is working but it I use $( document ).on('turbolinks:load', function() {} it is not working because of materialize-sprockets.
If I remove //= require materialize-sprockets in application.js then it working. if I add that line then it is not working. I need materialize-sprockets for design purpose.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'materialize-sass'
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported
runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read
more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more:
https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
application.js
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require autocomplete-rails
//= require materialize-sprockets
//= require activestorage
//= require turbolinks
//= require_tree .
_form.html.erb
<div class="field">
<%= f.label :category_id %><br />
<%= f.text_field :category_name, data: { autocomplete_source:
categories_path} %>
</div>
categories_controller.rb
def index
#categories = Category.order(:name).where("name like ?", "%#
{params[:term]}%")
render json: #categories.map(&:name)
end
product.js
$( document ).on('turbolinks:load', function() {
$("input#product_category_name").autocomplete({
source: $('#product_category_name').data('autocomplete-source')
});
})
routes.rb
resources :products
resources :categories
How to use $( document ).on('turbolinks:load') with
//= require materialize-sprockets ?

How should I require turbolinks in `application.js` in my Rails 5 application

I am building a relatively new Rails 5 application. I've been using the bootsy gem and I've been experiencing a problem where the wysiwyg will not show on the page until after a page refresh. After playing around for a while, I discovered that if I removed turbolinks from my application.js, the wysiwyg appears first time ( without a page refresh ). Can anyone tell me how I should be requiring turbolinks into my application.js. Thanks in advance.
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require bootsy
//= require turbolinks
//= require_tree .
application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootsy";
#import "articles";
gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.0'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# 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'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-turbolinks'
# 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
gem 'simple_form'
gem 'bootstrap-sass'
gem 'bootsy'
I'm using simple_form in combination with bootsy so my form looks something like this:
<%= simple_form_for #article, url: action_path do |f| %>
<%= f.input :title %>
<%= f.input :body, label: "Article Body", as: :bootsy %>
<%= f.submit %>
<% end %>
You need to use the turbolinks:load event like this :
$(document).on('turbolinks:load', ready)
function ready() {
//your code here
}
Your require is fine.
That's it.
So after a bit of playing around I found a solution. I added document.addEventListener('turbolinks:load', Bootsy.init); to my application.js and this solved the issue.

Why am I getting *unmatched OUTDENT* in this haml template in Rails 4.2 application?

I've been playing with react-rails gem and so I made a sample application with haml. When I do rails s and go to my sample route, I see the attached error coming from application.html.haml, the standard layout/application.html.haml view in Rails 4.2. If I remove stylesheet_link_tag and javascript_include_tag the Rails view renders fine. What could be causing it? Below are the relevant files. There is also a sample.coffee file but I can't imagine that has anything to do with it since as soon as I remove the *_tag helpers the Rails view renders without error.
application.js.coffee
# 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 react
#= require react_ujs
#= require components
#= require_tree .
application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title SampleApp
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= csrf_meta_tags
%body
= yield
application.css
/*
* 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, vendor/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 styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
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'
# 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
# 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
gem 'react-rails', '~> 1.6.0'
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
gem 'httparty'
gem 'haml-rails'
gem 'annotate'
gem 'figaro'
gem 'pundit'
gem 'lol_dba', require: false
gem 'foreman'
gem 'newrelic_rpm'
group :development do
gem 'sextant'
gem 'awesome_print', require: false
gem 'hirb', require: false
gem 'bullet'
gem 'flog', require: false
gem 'flay', require: false
gem 'reek', require: false
gem 'derailed'
gem 'stackprof'
gem 'sandi_meter'
gem 'rubocop', require: false
end
group :development, :test do
gem 'spring-commands-rspec'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'pry'
end
group :test do
gem 'factory_girl_rails'
gem 'capybara'
gem 'database_cleaner'
gem 'launchy'
gem 'codeclimate-test-reporter', require: nil
gem 'shoulda-matchers', require: false
end
group :production, :staging do
gem 'rails_12factor'
gem 'puma'
end

Foundation 5 - Rails 4 css topbar not working

I am having an issue with foundation 5, rails 4.1.0, as per screenshot, links are underlined, search box is off.
I have created a separate dummy rails app with the same spec and don't see the same issue
I've tried without turbolinks, and different topbar configurations.
any ideas where to troubleshoot this?
Screenshot:
http://postimg.org/image/ohtwc60rj/
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require_tree .
$(function() {
$(document).foundation();
});
`
application.css.scss
*= require_tree .
*= require_self
*/
gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/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'
gem 'foundation-rails'
gem 'rails_12factor'
gem 'activeadmin', github: 'gregbell/active_admin'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
group :development do
#gem 'sqlite3'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'slop'
gem 'guard-livereload', require: false
gem 'jazz_hands'
end
gem 'pg', '0.17.1'
group :test do
gem 'rspec-rails'
gem 'capybara'
gem 'rb-fsevent', :require => false
gem 'growl'
gem 'guard-spork', :github => 'guard/guard-spork'
gem 'spork', :github => 'sporkrb/spork'
end
#Server monitoring
gem 'newrelic_rpm'
Found that active admin was conflicting. commented out active_admin.css.scss resolved the issue. That put me in the right direction
Fix from Foundation when using active admin http://foundation.zurb.com/forum/posts/1359-foundation-5-impacted-by-active-admin-on-rails-4

Bootstrap 3 modal error with Rails 4

I am trying to display a modal that includes an object's information. I am running Rails 4, and Bootstrap 3. I followed an example on SO and have received an error:
Sprockets::FileNotFound in Gifts#index
couldn't find file 'bootstrap-modal'
My Gemfile looks like this:
gem 'rails', '4.0.0'
gem 'bootstrap-sass', '3.0.2.0'
gem 'activeresource'
group :assets do
gem 'jquery-ui-rails'
gem 'jquery-modal-rails'
end
group :development, :test do
gem 'sqlite3', '1.3.8'
gem 'rspec-rails', '2.13.1'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'factory_girl_rails', '4.2.1'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
gem 'devise'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'paperclip'
gem 'aws-sdk'
gem 'rmagick', '2.13.2'
gem 'stripe', :git => 'https://github.com/stripe/stripe-ruby'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'pg', '0.15.1'
gem 'rails_12factor', '0.0.2'
end
Application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-modal
//= require_tree .
$(document).ready(function() {
$('#modal-window').modal('show');
$('.modal-body').html('<%= escape_javascript(render :partial => "recipient_data", :object => #gift) %>');
});
Show.html.erb
<div class="modal hide fade" id="modal-window">
<div class="modal-header">
×
</div>
<div class="modal-body center">
<h2>Hello, World</h2>
<%= render 'charges/recipient_data' %>
</div>
<div class="modal-footer">
</div>
</div>
The link to the modal on my index page
<%= link_to 'Show', gift_path(gift), {:remote => true,
'data-controls-modal' => "modal-window",
'data-backdrop' => true,
'data-keyboard' => true,
:class => "btn btn-primary ", :id => 'show_gift'} %>
How should I load bootstrap-modal in this case?
The current version of bootstrap-sass uses a slightly different require line (with a / instead of a -)
//= require bootstrap/modal
However, since you're already including a //= require bootstrap, there is no need to require the modal file separately.

Resources