Bootstrap 3 modal error with Rails 4 - ruby-on-rails

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.

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 ?

Bootstrap 3 dropdown menu not working in production mode rails 5.2

I follow rails tutorial (https://www.railstutorial.org/book/basic_login) to generate sample rails app. But however the dropdown menu only works in development mode. In production mode, nothing happen when I click "Account". I tried below things, still cannot resolve it. Can anyone help me out?
1) pre-compile assets
2) change bootstrap and jquery order in applicaiton.js as someone mentioned
Here is _header.html.erb file code:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", home_path %></li>
<li><%= link_to "Help", help_path %></li>
<% if logged_in? %>
<li><%= link_to "Users", '#' %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", '#' %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: :delete %>
</li>
</ul>
</li>
<% else %>
<li><%=link_to "Log in", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>
Below is my assets/javascripts/application.js file:
//= require jquery
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .
Here is my gem file:
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.1'
# bootstrap
# gem 'bootstrap-sass'
gem 'bootstrap-sass', '~> 3.3.7'
# gem 'bootstrap', '~> 4.1.3'
# jquery
gem 'jquery-rails', '~>4.3'
# Use sqlite3 as the database for Active Record
# 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 'duktape'
# 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'
# 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', '~> 4.0'
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'sqlite3'
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
gem 'chromedriver-helper'
gem 'minitest'
gem 'minitest-reporters'
gem 'rails-controller-testing'
end
group :production do
gem 'pg'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Did you try precompiling the assets before starting your production instance? If not run:
RAILS_ENV=production rake assets:clobber
RAILS_ENV=production rake assets:precompile
Hope this helped.
I had a similiar problem with my Rails app. See here : Javascript in a fresh Rails 5.2.1 app on Heroku doesn't work properly
The problem was the uglifier gem I changed it from
gem 'uglifier', '>= 1.3.0'
which loaded the 4.1.18 version released a few weeks ago to
gem 'uglifier', '~> 3.0.4'
You should change
config.assets.debug = true
back to false because this loads all the assets one by one instead of minifying them (with uglifier's help) in production like it does in development. The error just comes from the uglifier gem not working correctly somehow
Edit:
These are my application.js require statements:
//= require jquery
//= require rails-ujs
//= require activestorage
//= require bootstrap
//= require turbolinks
//= require_tree .
This is my GemFile:
# frozen_string_literal: true
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.4.4'
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'rails', '~> 5.2.1'
gem 'sass-rails', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'uglifier', '~> 3.0.4'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'bootstrap-will_paginate'
gem 'faker'
gem 'friendly_id', '~> 5.2.0'
gem 'jquery-rails'
gem 'rails-i18n'
gem 'will_paginate'
group :development, :test do
gem 'byebug', platforms: %i[mri mingw x64_mingw]
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'duktape'
end
group :test do
gem 'capybara', '>= 2.15', '< 4.0'
gem 'chromedriver-helper'
gem 'rails-controller-testing'
gem 'selenium-webdriver'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby]
Here is the app I am working for my web development class at the moment:
Ruby on Rails Forum
I am also going with the tutorial and am at the password_reset Step of the Rails Tutorial and its working now with this set up...
Rails 5.2.1
Ruby 2.4.4p296
Windows 10 Education

Sprockets::FileNotFound couldn't find file 'jquery-fileupload/basic'

I am attempting to upload multiple pictures with jquery file upload. In my application.js file I added //= require jquery-fileupload/basic and in my Gemfile I added jquery-fileupload-rails under the assets group. This causes the error: couldn't find file jquery-fileupload/basic. I have reset my rails server and checked for spaces in application.js however the error stays. Any help would be greatly appreciated
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery.ui.datepicker
//= require jquery.ui.tooltip
//= require jquery-ui-1.10.4.custom.min
//= require jquery.timepicker.min
//= require bootstrap/dropdown
//= require bootstrap/modal
//= require raty
//= require_tree .
gemfile
gem 'byebug', '~> 3.5.1'
gem 'rails', '4.0.3'
gem 'pg'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'devise'
gem 'faker'
gem 'geocoder'
gem 'carrierwave'
gem 'mini_magick'
gem 'figaro'
gem 'state_machine'
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'rails_12factor'
gem 'elasticsearch-model'
gem 'simple_form'
gem 'omniauth-facebook'
gem 'omniauth-linkedin'
gem 'omniauth'
gem 'pry-rails'
group :development, :test do
gem 'rspec-rails', '2.13.1'
gem 'quiet_assets'
# gem 'pry-debugger'
gem 'meta_request'
gem 'interactive_editor'
gem 'hirb'
gem 'quiet_assets'
gem 'awesome_print'
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.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
group :assets do
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'jquery-fileupload-rails'
end
put it outside the assets group and run bundle install.
btw jquery-ui-rails does not belong there either

select2 and Bootstrap not styling input field elements in 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.

how to get rails angular app to render jade templates?

I'm trying to render jade templates from app/assets/javascripts/templates and I can't seem to get things to work. am getting chrome console errors,
GET http://localhost:3000/templates/lunch.jst.jade 404 (Not Found)
what direction should I be going with this ? Thanks !
source repository on github
https://github.com/jcdavison/lookingtolunch/
application.js
//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-route
//= require_tree ./app
//= require_tree ./templates
app.js.coffee
Lunch = angular.module('lunch', ['ngRoute'])
Lunch.config([ '$routeProvider', ($routeProvider) ->
# $routeProvider.when("/", { templateUrl: "../templates/test.jst", controller: "LunchCtrl" } )
$routeProvider.when("/", { templateUrl: "../templates/lunch.jst.jade", controller: "LunchCtrl" } )
# $routeProvider.when("/", { templateUrl: "test.jst", controller: "LunchCtrl" } )
# $routeProvider.otherwise( { templateUrl: "test.html", controller: "LunchCtrl" })
])
app/assets/javascripts/templates/lunch.jst.jade
h1 some text goes here
config/initializers/jader.rb -used for jade preprocessing following configuration instructions from https://github.com/zohararad/jader
Jader.configure do |config|
config.views_path = Rails.root.join('app','assets','javascripts','templates')
end
Gemfile
source 'https://rubygems.org'
ruby "2.1.0"
gem 'rails', '4.0.1'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 1.2'
gem "haml", "~> 4.0.4"
gem "angularjs-rails", "~> 1.2.7"
gem "zeus", "~> 0.13.3"
gem "pg", "~> 0.17.1"
gem "pry-debugger", "~> 0.2.2"
gem "devise"
gem "omniauth"
gem "omniauth-twitter"
gem "uuidtools"
gem "quiet_assets", "~> 1.0.2"
gem "thin", "~> 1.6.1"
gem "jader", "~> 0.0.8"
gem "ngmin-rails", "~> 0.4.0"
group :test do
gem "rspec-rails", "~> 2.14.1"
gem 'factory_girl_rails', '4.2.1'
end
group :doc do
gem 'sdoc', require: false
end
and of course, some screenshots...

Resources