引导下拉菜单不适用于heroku
Posted
技术标签:
【中文标题】引导下拉菜单不适用于heroku【英文标题】：Bootstrap dropdown is not working on heroku 【发布时间】：2016-02-16 16:50:01 【问题描述】：我正在使用 Ruby 2.0.0 和 Rails 4.2.3。
我的引导下拉菜单在 heroku 上不起作用。我不知道为什么？ 我已经尝试了一切，但似乎没有任何帮助
我的 Gemfile
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]
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, 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();
);
application.html.erb
<!DOCTYPE html>
<html>
<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 %>
<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">
<%= 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>
当我在浏览器上检查 javascript 控制台 (F12) 时，它显示以下错误：
Error: Bootstrap's JavaScript requires jQuery application-6de83ae08cb7e1d68e66d4b193a2778e.js:9:9
GET
ReferenceError: jQuery is not defined jquery.backstretch.min.js:1:1
ReferenceError: $ is not defined
我只是不知道如何解决这个问题。 有人可以帮我吗？ 提前致谢
【问题讨论】：
尝试在您的 application.js 中引导之前要求 jquery 做到了，但没有发生任何事情@beydogan 你试过了吗：//= require bootstrap-sprockets？
是的，它不起作用@laertiades
没有人知道为什么会出现这个错误？？
【参考方案1】：
使我的下拉菜单在开发 (Cloud9) 和生产 (Heroku) 中都起作用的三个步骤：
1) config/initializers.rb，添加：
Rails.application.config.assets.precompile += %w( bootstrap.js )
2) app/views/application.html.erb，在-head-标签内：
<%= javascript_include_tag "bootstrap" if Rails.env.development? %>
3) app/assets/javascripts/application.js，去掉这行：
//= require bootstrap
我的application.js之前的操作：
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
希望对您有所帮助，祝您有美好的一天。
【讨论】：
以上是关于引导下拉菜单不适用于heroku的主要内容，如果未能解决你的问题，请参考以下文章
将 validator.js 用于 Bootstrap 下拉菜单