I am using the Mailboxer and Chosen gems. A user can select multiple users from a dropdown menu. The problem is, on the initial load the dropdown appears already opened and allows you to only select one other user. If I reload the page the dropdown appears as it should.
When I check it in the chrome inspector I get TypeError: undefined is not a function error. I've checked S.O, and google and a lot of the advice is to change the order of my application.js file. I have tried this but cannot get this to fire properly on the initial start-up. Looking at my terminal window, every request seems to go through successfully.
Dropdown on initial load, broken
Dropdown w/ refresh working properly
So it DOES work, but why do I have to refresh the page to make it work properly?
Application.js:
...
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen-jquery
//= require bootstrap
//= require jquery.image-select
//= require messages
//= require turbolinks
application.css.scss:
...
*
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'bootstrap/theme';
#import 'chosen';
...
messages.coffee:
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
jQuery ->
$('.chosen-it').chosen()
gemfile:
source 'https://rubygems.org'
ruby '2.1.5'
gem 'rails', '4.2.0'
gem 'devise'
gem 'thin'
gem "simple_calendar"
gem 'bootstrap-sass'
gem 'bootstrap-will_paginate'
gem "mailboxer"
gem 'will_paginate'
gem 'gravatar_image_tag'
group :development do
gem 'sqlite3'
gem 'better_errors'
gem 'binding_of_caller'
gem 'annotate'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
gem 'chosen-rails'
gem 'sass-rails', '~> 4.0.5'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.1.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'
gem 'jquery-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 'sass-rails', '4.0.4'
# 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
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
Offending file, home.html.erb:
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<%= image_tag "slide-1.jpg", :class => "img-responsive img-full" %>
</div>
<div class="item">
<%= image_tag "slide-2.jpg", :class => "img-responsive img-full" %>
</div>
<div class="item">
<%= image_tag "slide-5.jpg", :class => "img-responsive img-full" %>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">Balern Education</h1>
<hr class="tagline-divider">
</div>
</div>
</div>
<div class="box">
<hr>
<hr>
<%= image_tag "intro1.jpg", :class => "img-responsive img-border img-left" %>
<hr class="visible-xs">
</div>
<div class="box">
<hr>
<h2 class="intro-text text-center">Balern really
<strong>Cares</strong>
</h2>
<hr>
</div> <!-- /.container -->
<!-- jQuery -->
<script src="assets/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
Try disabling turbolinks. If it starts working properly you either want to remove turbolinks from your project, or install the jquery-turbolinks gem
I think the problem was with the way I put a piece of code in. I am still not quite sure how to properly do this so if anyone could tell me that would be helpful...
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
I had this in one of my view pages. I assume the problem is that this shouldn't be in a view?
This is what was causing my chosen form and dropdown to misfire
Related
I am new to ruby on rails. Currently I am using the above specified version of rails and ruby. While following an old ruby on rails course for building a project. I am facing issues with the semantic-ui components. The JavaScript functionality is not working on components with turbolinks. Particularly the flash messages are using "ui message" but it doesn't close on click. Please have a look. I have tried reinstalling semantic-ui and other changes in application.js but still it haven't solved my problem.
1. Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.6'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.6', '>= 5.2.6.2'
# 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'
gem 'semantic-ui-sass'
# 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.2.0'
# 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'
gem 'hirb'
gem 'jquery-rails', '~> 4.4'
gem 'jquery-ui-rails'
# 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
gem 'solargraph'
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]
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'
gem 'listen', '>= 3.0.5', '< 3.2'
# 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
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'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
2.application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>MessageMe</title>
<%= favicon_link_tag 'favicon.ico' %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/navbar'%>
<div class="ui container ">
<%= render 'layouts/messages'%>
<%= yield %>
</div>
</body>
</html>
3.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, 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery3
//=require popper
//= require jquery.turbolinks
//= require jquery_ujs
//= require semantic-ui
//= require rails-ujs
//= require dropdown
//= require activestorage
//= require turbolinks
//= require_tree
$(document).addEventListener('turbolinks:load', function () {
$('.ui.dropdown').dropdown();
$('.message .close').on('click', function () {
$(this).close('.message').transition('fade');
});
})
4.application.css.scss
#import 'semantic-ui';
5.login_form.html.erb
This is the form for my login_page where i am receiving these flash messages.
<%= form_for(:session, html: {class: "ui form", role: "form"}, url: login_path) do |f| %>
<div class="field">
<% f.label :username, "Username"%>
<div class="ui left icon input">
<%= f.text_field :username, placeholder: "Username"%>
<i class="user icon"></i>
</div>
</div>
<div class="field">
<%= f.label :password,"Password" %>
<div class="ui left icon input">
<%= f.password_field :password , placeholder:"Password"%>
<i class="lock icon"></i>
</div>
</div>
<%= f.button "Login", class:"ui blue submit button"%>
<%end%>
this is the login page.
Please pardon me if there are many irregularities or i m using irrelevant libs etc.
Your kind help is appreciated.
I'm having strange issues with Bootstrap 4 and the Rails 5 javascript tags. Everything seemed to work fine when I started on this project and I haven't made any changes to any of the js, but suddenly my collapsable navbar dropdowns stopped functioning, and I can see these errors in the console:
GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)
I am using Rails 5.2.4.1 with Ruby 2.6.3 and Bootstrap 4.
In my application.html.erb I have these javascript tags at the end of the body:
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
But I think the problem must be contained in the tags or the files, because when I directly add these Bootstrap script tags into the application.html my dropdowns start working again:
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
So this is really confusing me and I want to make sure that the include_tag and pack_tag are actually working so that I can use the asset pipeline to keep other js files organised in folders when I need more.
This is my assets/javascripts/application.js:
//= require rails-ujs
//= require_tree .
And my javascript/packs/application.js:
import "bootstrap";
And here is my config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
I'm using a Devise template made by the LeWagon bootcamp and am not yet confident of how everything is interacting. So here is the gemfile it generated for safe measure:
source 'https://rubygems.org'
ruby '2.6.3'
gem 'bootsnap', require: false
gem 'devise'
gem 'jbuilder', '~> 2.0'
gem 'pg', '~> 0.21'
gem 'puma'
gem 'rails', '5.2.4.1'
gem 'redis'
gem 'autoprefixer-rails'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'sassc-rails'
gem 'simple_form'
gem 'uglifier'
gem 'webpacker'
group :development do
gem 'web-console', '>= 3.3.0'
end
group :development, :test do
gem 'pry-byebug'
gem 'pry-rails'
gem 'listen', '~> 3.0.5'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'dotenv-rails'
end
Am I forgetting to include any other files that might be affecting this? Hopefully someone can spot a simple problem in here, but happy to add more info if I've missed something. This is really getting on my goat lol.
Thanks in advance!
It's not good idea to have javascript_include_tag 'application' and javascript_pack_tag 'application' at the same time
If you use webpacker you don't need app/assets/javascripts folder
And you need to change app/javascript/packs/application.js to something like this:
require("#rails/ujs").start();
require("#rails/activestorage").start();
require("channels");
require("jquery");
import "bootstrap";
When you press enter in the address bar or refresh the page, it works like charm but as soon I click on a link in the navigation bar, some or most of the assets wont load. I already added "data-no-turbolink" => true to the link_to but no success.
This is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Rev</title>
<!-- FAVICON AND APPLE TOUCH -->
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-180x180.png">
<meta name="msapplication-TileImage" content="mstile.png">
<meta name="msapplication-TileColor" content="#94ccdf">
<meta name="theme-color" content="#94ccdf">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:400,400i" rel="stylesheet">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="main container">
<!-- HEADER -->
<header id="header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<!-- LOGO -->
<div id="logo">
<a href="index.html">
<%= link_to(image_tag("arrow-down.png", :alt => "arrow", :size => "150x150"), "/") %>
</a>
</div><!-- LOGO -->
</div><!-- col -->
<div class="col-sm-9">
<!-- MENU -->
<nav>
<a id="mobile-menu-button" class="waves" href="#"><i class="custom-icon-menu"></i></a>
<ul class="menu clearfix" id="menu">
<li class="megamenu">
<li class="<%= is_active?(root_path) %>"><%= link_to "Home", root_path, :"data-no-turbolink" => true %></li>
</li>
<li class="megamenu">
<li class="<%= is_active?(menu_team_path) %>"><%= link_to "Meet Team Derrick", menu_team_path, :"data-no-turbolink" => true %></li>
</li>
<li class="megamenu">
New Patient Center
</li>
<li class="megamenu">
About Us
</li>
</ul>
</nav>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</header><!-- HEADER -->
<%= yield %>
</div><!-- MAIN CONTAINER -->
</body>
</html>
application.scss #imports
#import "bootstrap-sprockets";
#import "bootstrap";
#import "plugin";
#import "fontawesome/css/font-awesome.min.css";
#import "animations/animate.min.css";
#import "calendar/beatpicker.min.css";
#import "counters/odometer-theme-default.css";
#import "fancybox/jquery.fancybox.css";
#import "custom-icons/css/custom-icons.min.css";
#import "custom-school-icons/css/custom-school-icons.min.css";
#import "custom-interface-icons/css/custom-interface-icons.min.css";
#import "custom-office-icons/css/custom-office-icons.min.css";
#import "revolutionslider/css/settings.css";
#import "revolutionslider/css/layers.css";
#import "revolutionslider/css/navigation.css";
#import "owl-carousel/owl.carousel.css";
#import "ytplayer/css/jquery.mb.ytplayer.min.css";
application.js requirements
//= require jquery/jquery-2.2.3.min.js
//= require bootstrap-sprockets
//= require viewport/jquery.viewport.js
//= require menu/hoverIntent.js
//= require menu/superfish.js
//= require fancybox/jquery.fancybox.pack.js
//= require revolutionslider/js/jquery.themepunch.tools.min.js
//= require revolutionslider/js/jquery.themepunch.revolution.min.js
//= require revolutionslider/js/extensions/revolution.extension.actions.min.js
//= require revolutionslider/js/extensions/revolution.extension.carousel.min.js
//= require revolutionslider/js/extensions/revolution.extension.kenburn.min.js
//= require revolutionslider/js/extensions/revolution.extension.layeranimation.min.js
//= require revolutionslider/js/extensions/revolution.extension.migration.min.js
//= require revolutionslider/js/extensions/revolution.extension.navigation.min.js
//= require revolutionslider/js/extensions/revolution.extension.parallax.min.js
//= require revolutionslider/js/extensions/revolution.extension.slideanims.min.js
//= require revolutionslider/js/extensions/revolution.extension.video.min.js
//= require owl-carousel/owl.carousel.min.js
//= require parallax/jquery.stellar.min.js
//= require isotope/imagesloaded.pkgd.min.js
//= require isotope/isotope.pkgd.min.js
//= require placeholders/jquery.placeholder.min.js
//= require validate/jquery.validate.min.js
//= require submit/jquery.form.min.js
//= require charts/jquery.easypiechart.min.js
//= require counters/jquerysimplecounter.js
//= require counters/odometer.min.js
//= require statistics/chart.min.js
//= require instafeed/instafeed.min.js
//= require twitter/twitterfetcher.min.js
//= require ytplayer/jquery.mb.ytplayer.min.js
//= require countdown/jquery.countdown.min.js
//= require animations/wow.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
Gemfile
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.1'
# Use sqlite3 as the database for Active Record
gem 'pg'
#WOW-Rails
gem 'wow-rails'
#Bootstrap
gem 'bootstrap-sass', '~> 3.3.6'
group :production do
gem 'rails_12factor'
end
# 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 'therubyracer', 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'
# 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'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# 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]
Any help would be appreciated!
Add method: "get" with link_to.
Try below code in your nav bar:
<ul class="menu clearfix" id="menu">
<li class="megamenu">
<li class="<%= is_active?(root_path) %>"><%= link_to "Home", root_path, :"data-no-turbolink" => true, method: "get" %></li>
</li>
<li class="megamenu">
<li class="<%= is_active?(menu_team_path) %>"><%= link_to "Meet Team Derrick", menu_team_path, :"data-no-turbolink" => true, method: "get" %></li>
</li>
<li class="megamenu">
New Patient Center
</li>
<li class="megamenu">
About Us
</li>
</ul>
I have bootstrap installed in my rails app, where everything is working correctly on local machine but as soon as i pushed it on heroku the dropdown and jQuery datepicker plugin stopped working
My codes
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.3'
# Use sqlite3 as the database for Active Record
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development, :test do
gem 'sqlite3'
end
gem 'devise'
gem 'simple_form'
gem 'mailboxer'
gem 'chosen-rails'
gem 'acts_as_votable', '~> 0.10.0'
gem 'public_activity'
# 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.8.0'
gem 'paperclip', '~> 4.3.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem "font-awesome-rails"
# 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
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
aplication.html.erb
<!DOCTYPE html>
<html>
<head>
<title>ShiftInd</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet"></link>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"
></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/assets/style.css">
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-
collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-md-12">
<a class="navbar-brand" href="/shipments">Shiftind</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right col-md-3">
<% if user_signed_in? %>
<li class="<%= active_page(:inbox) %>">
<%= link_to mailbox_inbox_path do %>
<span class="label label-danger pull-right"><%=unread_messages_count%></span>
<em class="fa fa-envelope fa-lg"></em>
<% end %>
</li>
<li class="dropdown" >
<span class="notification-count" style = "padding: 5px;"><%= #comment.count.inspect %></span>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="notification-count">
<span class="fa fa-bell fa-1x"></span></a>
<ul class="dropdown-menu">
<li><% #comment.flatten.each do |c|%>
<%= link_to comments_notification_update_path(:comment_id => c.id), :class => "notification" do %><%#user = User.find c.user_id%><%= #user.full_name.capitalize%> added a <i class="fa fa-inr"></i> bid <%= c.content.split(//).first(5).join %>....<% end %><br><br>
<% end %>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false"><strong><font style="text-transform: capitalize;">Hi, <%= current_user.first_name %></strong></font><span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Edit Your Details", edit_user_registration_path %></li>
<li><%= link_to "Log Out", destroy_user_session_path, method: :get %><li>
<% else %>
<li><%= link_to "Register", new_user_registration_path %></li>
<li><%= link_to "Log in", new_user_session_path %></li>
<% end %>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="text-center">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
</div>
<%= yield %>
</body>
</html>
aplication.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 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 bootstrap
//= require jquery
//= require jquery_ujs
//= require chosen-jquery
//= require turbolinks
//= require_tree .
$(document).ready(function(){
$(document).mousemove(function(e){
TweenLite.to($('body'),
.5,
{ css:
{
backgroundPosition: ""+ parseInt(event.pageX/8) + "px "+parseInt(event.pageY/'12')+"px, "+parseInt(event.pageX/'15')+"px "+parseInt(event.pageY/'15')+"px, "+parseInt(event.pageX/'30')+"px "+parseInt(event.pageY/'30')+"px"
}
});
});
});
$(function() {
$("#shipment_date").datepicker();
});
I tried many things but nothing helped. Any help will be great, thanks in advance.
Old thread, I know, but from what I can see, the answer is to precompile manually before pushing to heroku. I did this after a lot of searching and it worked for me.
$ RAILS_ENV=production bundle exec rake assets:precompile
I put this in the terminal just before the git add. I also restarted the heroku dyno.
You should at least two things: stop loading duplicate files (CDN combined with a GEM) and reorganize your application.js file so Bootstrap is required after jQuery.
The <head> section of your application.html.erb should be something closer to this:
<head>
<title>ShiftInd</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
With the exception of jQuery-UI, you allready have a GEM loading these files and some of these have duplicates from a CDN as well. And your own stylesheets should be added to application.scss using #import.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
You're pulling in files with CDNs while also using GEMs to implement the same files (jQuery/Font Awesome, etc.).
source 'https://rubygems.org'
gem 'rails', '4.2.3'
gem 'devise'
gem 'simple_form'
gem 'mailboxer'
gem 'chosen-rails'
gem 'acts_as_votable', '~> 0.10.0'
gem 'public_activity'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '1.8.0'
gem 'paperclip', '~> 4.3.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem "autoprefixer-rails"
gem 'font-awesome-sass', '~> 4.4.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development, :test do
gem 'sqlite3'
end
# gem 'therubyracer', platforms: :ruby
# 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
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Here's a new version of your Gemfile to use as a reference: I changed a few things which you don't have to do but may help in general:
Switched Font-Awesome Gems
Added Autoprefixer See Bootstrap-sass Gem
Bootstrap requires the use of Autoprefixer. Autoprefixer adds vendor
prefixes to CSS rules using values from Can I Use.
Added Jquery-UI Gem (You can also use the CDN if you want, this is just another option. Original files for reference below.)
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
In your application.js, Bootstrap needs to be after jQuery. See the Docs.
//= require jquery
//= require jquery_ujs
//= require chosen-jquery
//= require bootstrap
//= require turbolinks
//= require_tree .
This is an example application.scss.
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "jquery-ui";
#import 'style';
*Your style.css, needs to be changed to style.scss
So I have a Rails 4 application with the cocoon gem with 2 radio buttons. If the user selects the Yes radio button, then the div#kites section is shown and the "Add kite" should be clicked. I know the code enters the if statement because when I select the Yes radio button, "hello kite" is shown in the console and the div#kites section is shown. Yet, the link is not clicked. I am able to enter $("#kites > div.links > a").trigger("click") in the console and trigger the appropriate behavior. Any ideas on why it could be working in the console but no in the code?
Coffeescript code:
$("input[name=led_to_kite]").change ->
if($("#led_to_kite_Yes").is(":checked"))
$("#kites").show()
$("#kites > div.links > a").trigger("click")
console.log "hello kite"
HTML markup
<ul id='led_to_kite'>
<li>kites</li>
<li><input checked="checked" id="led_to_kite_Yes" name="led_to_kite" type="radio" value="Yes" /> Yes</li>
<li><input id="led_to_kite_No" name="led_to_kite" type="radio" value="No" /> No</li>
</ul>
<div id='kites'>
<table>
<thead>
<tr>
<th>Description of kite</th>
<th>Description of setting in which kite was implemented</th>
</tr>
</thead>
<tbody>
<tr>
<td>test kites</td>
<td></td>
</tr>
</tbody>
</table>
<div class='nested-fields'>
<div class='outcome add-outcome-form'>
</div>
</div>
<input id="person_kites_attributes_0_id" name="person[kites_attributes][0][id]" type="hidden" value="10" />
<div class='links'>
<a class="add_fields" data-association-insertion-template="<div class='nested-fields'>
<div class='outcome add-outcome-form'>
<fieldset class="inputs"><ol><li class="string input optional stringish" id="person_kites_attributes_new_kites_brief_description_input"><label class="label" for="person_kites_attributes_new_kites_brief_description">Description of kite</label><input id="person_kites_attributes_new_kites_brief_description" name="person[kites_attributes][new_kites][brief_description]" type="text" />
</li>
<li class="string input optional stringish" id="person_kites_attributes_new_kites_setting_description_input"><label class="label" for="person_kites_attributes_new_kites_setting_description">Description of setting in which kite was implemented</label><input id="person_kites_attributes_new_kites_setting_description" name="person[kites_attributes][new_kites][setting_description]" type="text" />
</li>
</ol></fieldset>
</div>
</div>
" data-association="kite" data-associations="kites" href="#">Add kite</a>
</div>
</div>
application.js in assets directory
// 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 jquery-ui
//= require cocoon
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require jquery.fileupload-process
//= require jquery.fileupload-image
//= require jquery.fileupload-validate
//= require jquery.are-you-sure
//= require ays-beforeunload-shim
//= require communication_dropdown
//= require file_uploader
//= require radio_button_logic
//= require show_pilot_fund_buttons
//= require formtastic_datepicker
//= require jquery.stepy
//= require wizard_stepy
//= require progress_bar
//= require jquery.icheck
//= require icheck
//= require investigator_dropdown
//= require check_form
//= require chosen-jquery
Current Gemfile in Rails application:
source 'https://rubygems.org'
ruby "2.1.2"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~>4.1.6'
# Use sqlite3 as the database for Active Record
# gem 'sqlite3'
gem 'pg', '~> 0.17.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.4'
# 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'
gem 'jquery-ui-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
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
# gem 'spring', group: :development
gem 'annotate', '~> 2.6.5'
gem 'figaro'
#ref: "9bbc7343f3916e73c185d071608e5ef24e9638d0"
gem 'dropbox-sdk', '~> 1.6.4'
gem 'bootstrap-sass', '~> 3.2.0.2'
gem "haml-rails"
gem 'devise'
gem 'formtastic', '~>3.0.0rc'
gem 'autoprefixer-rails'
gem "cocoon"
gem "mandrill-api"
gem 'resque', '~> 1.25.2'
gem 'tzinfo-data'
gem 'pundit'
gem 'ruby-progressbar'
gem 'jquery-ui-themes'
gem 'smarter_csv'
gem 'foreman'
gem 'unicorn', '~> 4.8.3'
gem 'aws-sdk'
gem 'paperclip'
gem 'obfuscate_id', :git => 'https://github.com/namick/obfuscate_id.git'
gem 'chosen-rails'
group :development do
gem 'sextant'
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 "poltergeist", "~> 1.5.0"
gem "codeclimate-test-reporter", require: nil
gem 'shoulda-matchers', require: false
gem 'vcr', '~> 2.9.2'
gem 'webmock', '~> 1.18.0'
end
group :staging, :production do
gem 'rails_12factor'
end