2017-07-29 46 views
0

我正在通過Michael Hartl的Rails教程(RoR 5)工作,並試圖創建一個下拉菜單作爲Web應用程序的一部分。我仔細地跟蹤了Hartl的指示,但我無法在登錄後實際顯示在頁面上的下拉列表。Rails App/Bootstrap:如何修復下拉菜單?

Stack Overflow上的過去線程討論了同樣的問題,這些線程已超過3年,因此大部分所提到的寶石(和相應的解決方案)已過時,似乎並不適用於最新版本的Rails(本教程使用5.1.2版)。

我曾嘗試以下修正(沒有工作過,有的導致錯誤):

  • 包括「要求的JQuery」,並在application.js中
  • 「需要jQuery的UJS」更改列出的順序所以之前或其他組件
  • 使用後引導加載「要求自舉下拉」,這可能會在新的引導下載

  • 包括$(文件).dropdown方法已過時在coffee.js文件

  • 重新啓動Web服務器不同的時間

我非常初學者的Rails(和編程通常情況下),這樣你就可以提供任何意見是非常讚賞。

以下是這似乎相關的/有用的文件:

的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.2' 
#bcrypt for password hashing 
gem 'bcrypt',   '3.1.11' 
#Boostrap-Sass 
gem 'bootstrap-sass', '3.3.7' 

# Use Puma as the app server 
gem 'puma', '~> 3.7' 
# Use SCSS for stylesheets 
gem 'sass-rails', '~> 5.0' 
# Use Uglifier as compressor for JavaScript assets 
gem 'uglifier', '>= 1.3.0' 
# gem 'therubyracer', platforms: :ruby 

# Use CoffeeScript for .coffee assets and views 
gem 'coffee-rails', '~> 4.2' 
gem 'turbolinks', '~> 5' 
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] 
    gem 'sqlite3', '1.3.13' 
    # 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' 
    gem 'spring' 
    gem 'spring-watcher-listen', '~> 2.0.0' 
end 

group :test do 
    gem 'rails-controller-testing', '1.0.2' 
    gem 'minitest-reporters',  '1.1.14' 
    gem 'guard',     '2.13.0' 
    gem 'guard-minitest',   '2.4.4' 
end 

group :production do 
    gem 'pg', '0.18.4' 
end 

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

應用程序/ JavaScript的/ application.js中:

//= require rails-ujs 
//= require bootstrap 
//= require turbolinks 
//= require_tree . 

_header.html。 erb:

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <%= link_to "sample app", root_path, id: "logo" %> 
    <nav> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "Help", help_path %></li> 
     <% if logged_in? %> 
      <li><%= link_to "Users", '#' %></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       Account <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><%= link_to "Profile", current_user %></li> 
       <li><%= link_to "Settings", '#' %></li> 
       <li class="divider"></li> 
       <li> 
       <%= link_to "Log out", logout_path, method: :delete %> 
       </li> 
      </ul> 
      </li> 
     <% else %> 
      <li><%= link_to "Log in", login_path %></li> 
     <% end %> 
     </ul> 
    </nav> 
    </div> 
</header> 

應用程序/視圖/佈局/ _rails_default.html.erb:

<%= csrf_meta_tags %> 

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 

回答

0

當我做了邁克爾的教程(2017年七月),我結束了去除寶石文件中的所有版本。這種方式軌道只是加載每個的最新版本。 因此改變:

gem 'bootstrap-sass', '3.3.7' 

只是:

gem 'bootstrap-sass' 

等,爲您的Gemfile每顆寶石。
在我從不同的過時和不兼容的寶石中完成這件事之前,我得到了各種奇怪的錯誤。
祝你好運!