我正在使用包含引导下拉列表的持久导航栏的Rails应用程序.无论出于何种原因,它偶尔会起作用;在启动或刷新下拉列表将始终有效,在第一次重定向后,它们永远不会工作,之后它似乎基本上在工作和不工作之间交替.当它不起作用时,单击下拉列表时没有任何反应.我最初的怀疑是Turbolinks应该受到责备,但我没有,我已经能够验证这一点(见下面的编辑).花了几个小时阅读后,我已经尝试了所有可以找到的“明显”修复,但还没有运气.
值得注意的是,问题仍然存在……
>有或没有turbolinks.jquery
>使用bootstrap或bootstrap-sprockets
>跨越所有最新版本的bootstrap-sass gem
>是否重新安排我的application.js文件
>使用application.js data-turbolinks-track设置为true或false
>无论是开发还是生产
编辑：
通过完全禁用Turbolinks(删除turboling和jquery-turbolinks gems,删除application.js中对它们的引用,并删除application.html.erb中的data-turbolinks-track属性),我没有工作下拉列表.也就是说,我仍然想知道为什么这不起作用,因为我希望在发布之前重新启用turbolinks. /结束编辑
这些是我认为相关的文件：
的application.js
请注意// =需要树.不在场.这是故意的(我有一些特定于页面的javascripts,我将它们包含在application.html.erb中).
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require bootstrap-sprockets
Gemfile.rb
source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails',github: 'rails/rails' gem 'rails','4.2.0' # Bootstrap gem 'bootstrap-sass','3.3.4.1' gem 'autoprefixer-rails' # 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' # Use jquery as the JavaScript library gem 'jquery-rails' # Make Turbolinks play nice with JQuery gem 'jquery-turbolinks' # 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 # Gems for interfacing with sql Server gem 'tiny_tds' gem 'activerecord-sqlserver-adapter' # Use ActiveModel has_secure_password gem 'bcrypt','~> 3.1.7' group :development,:test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console','~> 2.0' # Test DB gem 'sqlite3' end # Windows does not include zoneinfo files,so bundle the tzinfo-data gem gem 'tzinfo-data',platforms: [:mingw,:mswin,:x64_mingw,:jruby]
application.css.scss
(只是为了证明我有效地包含了bootstrap的其他部分)
/* CHARSET -------------------------------------------------- */ @charset "utf-8"; /* IMPORTS - BOOTSTRAP -------------------------------------------------- */ @import "bootstrap-sprockets"; @import "bootstrap"; /* IMPORTS - SCSS MIXINS -------------------------------------------------- */ @import "mixins/*"; /* IMPORTS - LAYOUT CSS -------------------------------------------------- */ @import "layout"; /* IMPORTS - CONTROLLERS' CSS -------------------------------------------------- */ @import "controllers/*";
application.html.erb
请注意,有两个不同的可能导航栏(一个在登录时,另一个在注销时)从部分渲染.只有_nav_logged_in.html.erb包含下拉列表,我接下来会包含它.
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta name="description" content="This is APO Lite in the context of Ruby on Rails">
<Meta name="author" content="Connor McKee">
<title>APO Lite</title>
<%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track' => true %>
<%= csrf_Meta_tags %>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<%= link_to "APO Lite",root_url,id: "navlogo",class: "navbar-brand" %>
</div>
<% if logged_in? %>
<%= render 'layouts/nav_logged_in' %>
<% else %>
<%= render 'layouts/nav_logged_out' %>
<% end %>
<!--/.nav-collapse -->
</div>
</nav>
<header class="jumbotron subhead <%= 'expandedJumbotron' if current_page? root_url %>" id="overview">
<div class="container">
<% if has_project? && !current_page?( root_url ) %>
<h1><%= current_project.name %></h1>
<p class="lead"><%= current_project.description %></p>
<% else %>
<h1>WELCOME TO APO LITE</h1>
<p class="lead">Your journey towards a Better Project Management Experience Starts Here</p>
<% end %>
</div>
</header>
<div class="container">
<!-- Page Description a.k.a. "Context" -->
<% if content_for?(:context) %>
<div class="row" id="context">
<div class="col-md-12">
<%= yield :context %>
</div>
</div>
<% end %>
<!-- Page Content -->
<%= yield %>
<!-- This is debug info -->
<% if Rails.env.development? %>
<div class="row">
<div class="col-md-12">
<%= debug(params) %>
</div>
</div>
<% end %>
</div>
<!-- Javascripts -->
<%= javascript_include_tag 'application','data-turbolinks-track' => true %>
<% if content_for?(:page_js) %>
<%= yield :page_js %>
<% end %>
</body>
</html>
_nav_logged_in.html.erb
最后,这是下拉列表本身.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<% if has_project? %>
<%= link_to current_project.name,current_project %>
<% else %>
<a href="#about">My Project Name</a>
<% end %>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Administer<span class="caret"></span></a><!--class="active"-->
<ul class="dropdown-menu" role="menu">
<li><a href="#">Questionnaires</a></li>
<li><a href="#">Reports</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Support<span class="caret"></span></a><!--class="active"-->
<ul class="dropdown-menu" role="menu">
<li><a href="#">Documentation</a></li>
<li><a href="#">Help Desk</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Log out",logout_path,method: "delete" %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%= current_user.first_name %><span class="caret"></span></a><!--class="active"-->
<ul class="dropdown-menu" role="menu">
<li><%= link_to "My Profile",current_user %></li>
<li><%= link_to "Log out",method: "delete" %></li>
</ul>
</li>
</ul>
</div>
最后,这是在应用程序运行时如何加载脚本
这是使用bootstrap-sprockets,但bootstrap本身会导致相同的问题.请注意在任何地方都没有重复.
<!-- Javascripts --> <script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/affix.self-68d1a5161d04ca9fe1b9d9f4114d9426c7798bf90f2703a97aca35c8113469bb.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/alert.self-15ce09eba576e56db3edfd87accc0ff48823df915169e350b4fd97290f96aee1.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/button.self-37c62bff1d75f86f3348b8679873d5156d8b9938b62841038dca21690f4740f1.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/carousel.self-9aaab1a477b9c1156bab751cb8da47f77dace6da88eef8ae830e60f3cff3a8be.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/collapse.self-eeece00cd06a3d7cc071ab7845b549d4991edd0f0895e4be70fe40bac2fb5f4b.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/dropdown.self-a3998e7ca949c04cb86b5c635deb0abcc7a24dc02e81be66b8acfef02d811e45.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/modal.self-f2759e138605770e60526c00c6d86cbb3378da203641f9d6b204c9f0192b9267.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/scrollspy.self-5ea180afe4404f83fc97d997833f2edefd34475b0b5ddab310e27abc2bbd5f2f.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/tab.self-e1bba7115c90301056ee94c4716de2fcbe4498015def2dab9ff9879f339bd245.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/transition.self-7742dca5e6acf313fbb217811b48468282cddf1a9baea5c89ec92e367ef242cb.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/tooltip.self-c3b5c16f394ab9c0391db4431aac4f2d2ddf1bba4c5d3228ed343de05ecc8e83.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/popover.self-2674d99c3ab0415dba0b958a80b3840f70ff6368b155d890306c0291be49453b.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/application.self-f98a0dd27ad1c55b2b9cfe97296d4887e5d4a4535b3bbbf9130c1050771738b2.js?body=1" data-turbolinks-track="false"></script>
解决方法
我很确定必须在jquery_ujs之前加载jquery.turbolinks.
在application.js文件中试试这个：
//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require bootstrap //= require turbolinks //= require_tree .
修订|添加
我不认为你的导航块中间应该有一个容器div.您可能想要尝试复制/粘贴这个简单的示例结构(来自正在运行的应用程序).
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "A",some_working_url %></li>
<li><%= link_to "A",some_working_url %></li>
</ul>
</li>
</li>
...
</ul>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
