[英]bootstrap dropdown not working on heroku
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 我在我的Rails应用程序中安装了引导程序,其中的一切在本地计算机上均正常运行,但是一旦我在heroku上将其推送,下拉列表和jQuery datepicker插件便停止工作
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 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 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.
任何帮助将是巨大的,在此先感谢。
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 . 您至少应该做两件事:停止加载重复文件(CDN与GEM结合使用),并重新组织
application.js
文件,因此jQuery之后需要Bootstrap 。
The <head>
section of your application.html.erb should be something closer to this: 您application.html.erb的
<head>
部分应该更接近于此:
<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. 除了jQuery-UI之外,您都已经有一个GEM来加载这些文件,其中一些也具有CDN中的重复项。 And your own stylesheets should be added to
application.scss
using @import
. 并且应该使用
@import
将自己的样式表添加到application.scss
中。
<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.). 您将使用CDN导入文件,同时还使用GEM来实现相同的文件(jQuery / Font Awesome等)。
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: 这是您的Gemfile的新版本,可以用作参考:我更改了一些您不需要做的事情,但可能会有所帮助:
Bootstrap requires the use of Autoprefixer.
Bootstrap需要使用Autoprefixer。 Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.
Autoprefixer使用“我可以使用”中的值将供应商前缀添加到CSS规则。
Added Jquery-UI Gem (You can also use the CDN if you want, this is just another option. Original files for reference below.) 添加了Jquery-UI Gem(如果需要,也可以使用CDN,这只是另一个选择。原始文件供参考。)
<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. 在您的application.js中,Bootstrap必须位于jQuery之后。 See the Docs .
请参阅文档 。
//= require jquery
//= require jquery_ujs
//= require chosen-jquery
//= require bootstrap
//= require turbolinks
//= require_tree .
This is an example application.scss. 这是一个示例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
*您的
style.css
,需要更改为style.scss
Old thread, I know, but from what I can see, the answer is to precompile manually before pushing to heroku. 我知道是旧线程,但是据我所知,答案是在推送到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. 我把它放在git add之前的终端中。 I also restarted the heroku dyno.
我还重新启动了heroku dyno。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.