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
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 tried all the solution in stackoverflow but I still have a trouble with jquery load on rails.It works on localhost but not on heroku.
So, here is my application.js file
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require_tree .
here is application.css file
*= require_tree .
*/
Here is my gem file;
source 'https://rubygems.org'
gem 'rails', '4.2.0'
gem 'json', '~> 1.8.2'
gem 'bcrypt', '3.1.7'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.1'
gem 'uglifier', '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
#//= require turbolinks TO ASSETS gem 'turbolinks', '2.3.0'
gem 'jbuilder', '2.2.3'
gem 'sdoc', '0.4.0', group: :doc
gem "mailboxer"
gem "select2-rails"
group :development, :test do
gem 'sqlite3', '1.3.9'
gem 'byebug', '3.4.0'
gem 'web-console', '2.0.0.beta3'
gem 'spring', '1.1.3'
end
group :test do
gem 'minitest-reporters', '1.0.5'
gem 'mini_backtrace', '0.1.3'
gem 'guard-minitest', '2.3.1'
end
group :production do
gem 'pg', '0.17.1'
gem 'rails_12factor', '0.0.2'
end
and here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
The funny thing is, console does not give an error about jquery but my slider does not work. And some of the css changes did not reflect to heroku (I did precompile)
Since Heroku pre-compiles by default, I'd say the error is likely that you have a "polluted" precompiled assets (when you have maybe 8-10 application.js variants in public/assets).
I could - of course - be completely wrong and will happily remove this post, but you may wish to try:
$ rake assets:clean
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master
$ heroku rake assets:clean
This seems to be an assets compilation issue. For heroku make sure your production environment is well configured, take a look to your /config/production.rb, and make sure you have these configs:
config.serve_static_files = false
config.assets.compile = false
config.assets.digest = true
After check the above configs then make sure your public/assets folder is not in .gitignore.
Then precompile assets in local for then redeploy to heroku, run the following command:
rake assets:precompile RAILS_ENV=production
this may take some minutes, after the process finishes then you can commit and push to heroku:
git add .
git commit -m "Precompiled assets for heroku"
git push heroku master
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