Javascript Can'；t让引导模式与rails 4一起工作

我试图让引导模态工作，但迄今为止没有成功。我认为相关文件的细节如下

Gemfile

source 'https://rubygems.org'

ruby '2.2.2'

gem 'rails', '4.1.7'
gem 'pg', '0.17.1'

gem 'devise', '3.5.2'
gem 'omniauth-facebook'

gem 'simple_form', github: 'plataformatec/simple_form'
gem 'activeadmin', github: 'activeadmin'
gem 'possessive'
# gem 'paperclip', '~> 4.2'
gem 'cocaine', '~> 0.5.3'
# gem 'rmagick'
gem 'aws-sdk'
gem 'carrierwave'
gem 'mini_magick'
gem 'fog'
gem 'newrelic_rpm'
gem 'acts-as-taggable-on'
gem 'acts_as_commentable_with_threading'
gem 'acts_as_votable', '~> 0.10.0'
gem 'leaderboard'
gem 'turbolinks', '2.3.0'
gem 'jquery-turbolinks'
gem 'public_activity'
gem 'figaro'
gem 'will_paginate', '~> 3.0.7'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

# Gems used only for assets and not required
# in production environments by default.
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'coffee-rails', '~> 4.1.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'font-awesome-sass'
gem 'uglifier', '>= 1.0.3'

gem 'jquery-rails', '2.3.0'
gem 'fancybox2-rails', '~> 0.2.8'

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  # automatically runs tests when you save a file, but takes up too much CPU for cloud9 
  # gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'rails_12factor'
  gem 'puma'
end

group :rake do
  gem 'faker'
end

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

/*
 *= require bootstrap-select.min
 *= require fancybox
 */
@import "bootstrap-sprockets";
@import "bootstrap";

application.css.scss

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

/*
 *= require bootstrap-select.min
 *= require fancybox
 */
@import "bootstrap-sprockets";
@import "bootstrap";

shopping.html.erb

<% provide(:title, 'Shopping') %>
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

&时代；
情态标题
一个好身体&hellip

接近
保存更改

---

我在控制器中有一个“购物”动作。当我访问页面/购物时，那里的布局是空白的，但正文是空白的。我只是从静态示例下的bootstrap modals页面复制了代码，因为我想在尝试自定义它之前看看它是否可以工作。

在application.js中，您缺少核心bootstrap js文件

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
/* insert bootstrap here */
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

然后将id添加到shopping.html.erb视图中

  <% provide(:title, 'Shopping') %>
  <div class="modal fade" id="myModal"><!--observe new id -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Modal title</h4>
        </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- for learning purposed, initalize the modal in a script tag, once you're comfortable add this to a js file-->
<script>$('#myModal').modal('show');</script>

&时代；
情态标题
一个好身体&hellip

接近
保存更改
$（'myModal'）.modal（'show'）；

引导模式是框架的核心js功能。 然后，在您的

---

希望这能有所帮助。

谢谢你的回答，但没有用。这里的文档还说不需要引导链轮和引导。当事件触发时，您是否在chrome控制台中看到javascript错误？如果发现错误，您需要初始化它添加以下代码片段：$（'#mymodal'）.modal（'show'）；{用模态的id替换#mymodal，确保将模态的id添加到顶层元素（您的div类模态）}