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>
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 can't get it to work. I've followed the installation process described here. Other solutions on this site have not helped. I keep getting this error on Developers tools
static_pages.self-8c8a5c3….js?body=1:7 Uncaught TypeError:
JQuery(...).best_in_place is not a function
On the controller's coffee file:
$(document).on 'ready page:load', ->
jQuery(".best_in_place").best_in_place();
return
I've also tried calling it on the view itself
<script type = 'text/javascript'>
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
</script>
application.js
//= require jquery
//= require best_in_place
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require best_in_place.jquery-ui
//= require bootstrap
//= require turbolinks
//= require_tree .
I've even tried without best_in_place.jquery-ui and changing the order below require_tree of both best_in_place
This is my Gemfile:
gem 'rails', '4.2.6'
gem 'sqlite3'
gem 'devise', '~> 3.5', '>= 3.5.6'
gem 'best_in_place', '~> 3.0.1'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 5.0', '>= 5.0.5'
gem 'simple_form'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml-rails', '~> 0.9.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'sass-rails', '~> 5.0'
gem 'will_paginate', '~> 3.1'
gem 'bootstrap-editable-rails', '~> 0.0.9'
I've tried with gem 'best_in_place', github: 'bernat/best_in_place' as some sites suggested.
I was redefining the Jquery Library. As expressed in the documentation, Best-in-place should be placed after Jquery on application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require best_in_place
//= require best_in_place.jquery-ui
But my applications.html.erb had the following :
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
overwriting my previous declaration.
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
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
trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head.
I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. It looks like javascript isn't working properly, but I'm not sure why.
My gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development do
gem 'sqlite3'
gem 'spring'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
application.css
*= require_tree .
*= require_self
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
config/application.rb
module FamilyLunch
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
application.html.erb
<html>
<head>
<title>Family Lunch | <%= yield(:title) %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
For the JavaScript you have to add //= require bootstrap-sprockets to application.js like this :
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
For Solidus create an app/assets/spree/frontend/all.js and include:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
this will override the app/assets/application.js