Rails 4 Bootstrap模式JavaScript尽管尝试了所有内容但仍无法正常工作

Question

我知道还有很多这样的帖子，但是我已经经历了很多这样的帖子，但仍然找不到适合我的解决方案。

我有一个我试图打开的模态，我需要在向用户显示之前使用JavaScript进行修改。通常，这将是一个简单的设置链接点击以调用JavaScript函数来执行我的操作并打开模式。然而无论我尝试什么它都不会打开模态，我只是得到

Uncaught TypeError: $(...).modal is not a function
at open_report_legs_modal (pilot_actions.self-ef0bb7d….js?body=1:2)
at HTMLAnchorElement.onclick (VM315 2:252)

我也尝试使用普通的数据目标和诸如此类的方法打开模态，然后使用JavaScript在show.bs.modal上执行，但这也不起作用，它只是没有被触发。

我的代码

Gem文件条目

gem 'rails', '4.2.6'
gem 'mysql2'
gem 'pg'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'carmen-rails', '~> 1.0.0'
gem 'bootstrap_form'
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'

application.js需要部分（其中没有其他相关代码，只是用于突出显示活动导航栏链接和初始化数据表的一些内容）

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require_tree .

pilot_actions.js

function open_report_legs_modal(tourID, legID){
    $("#ReportLegModal").modal('show');
}

模态（pilot_actions / _report_leg.html.erb）

<div class="modal fade" id="ReportLegModal" tabindex="-1" role="dialog" aria-labelledby="ReportLegModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ReportLegModalLabel">Report Leg</h4>
      </div>
      <div class="modal-body">
        <%= bootstrap_form_tag  url: pilot_actions_submit_tour_report_path do |f| %>

            <%= f.collection_select :tour, Tour.all, :id, :tour_name, {}, {class: 'disabled'}%>

            <div class="form-group">
              <label class="control-label col-md-2" for="subject">Subject</label>

              <div class="col-md-8">
                <%= f.text_field :subject, placeholder: 'Enter the subject', class:'form-control', hide_label: true%>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="message">Message</label>

              <div class="col-sm-8">
                <%= f.text_area :message, placeholder: 'Enter message', class:'form-control', hide_label: true%>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-6 col-md-offset-2">
                <%= f.submit 'Send', class: 'btn btn-primary' %>
              </div>
            </div>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

调用javascript

的按钮

<%= link_to '#', onclick: "open_report_legs_modal(#{@tour.id}, #{leg.id});" do %><% image_tag 'admin_images/validate.png', size:'25'%><% end%>

最后，使用

将模态与按钮包含在同一页面上

<%= render 'pilot_actions/report_leg' %>

我不知道为什么会这样。

除了当前的设置，我还尝试使用// = require bootstrap和// = require bootstrap / modal，我尝试过不使用bootstrap sass并且只包含正常的bootstrap文件和I＆ ＃39; ve也试过使用bootstrap CDN，没有任何效果。

Answer 1

最终找到了这个问题。

显然，当我第一次创建应用程序时，我为JQuery Datatables添加了一个脚本链接，其中包含了自己的JQuery副本，它打破了所有内容。