引导3模式Rails 4未显示

Question

前几天，我问了一个有关这个问题的问题，但遇到了另一个错误。我有Index.html.erb和一个叫link_to的模式。一旦模态打开，我希望它的主体包括一个部分。我的大部分代码来自Bootstrap示例，因为我希望在将所有的表单细节都包含在部分之前首先让它正常工作。

gemfile文件：

group :assets do
    gem 'sass-rails', '4.0.1'
    gem 'bootstrap-sass', '3.0.2.0'
    gem 'bootstrap-modal-rails'
end 

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap/modal
//= require_tree .

Index.html.erb (视图/礼物)

<p><%= link_to 'Buy', gift_path(gift), {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal', :class => "btn btn-primary ", :id => 'myModal'} %></p>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                <%= render 'gifts/show' %>
              </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 -->

_show.html.erb (视图/礼物/)

<p>This is a gift.</p>

gifts.js.coffee (以资产/javascripts/)

$('#myModal').modal('options')

gifts.controller.rb (只是显示函数)

   def show
        @gift = Gift.find(params[:id])
        respond_to do |format|
          format.html {render :show}
          format.json { head :ok}
        end
    end 

当我单击浏览器中的按钮时，rails终端显示如下：

Processing by GiftsController#show as JS

当我在浏览器中查看javascript控制台时，我看到一个JS错误：

[Error] TypeError: '[object Object]' is not a function (evaluating 'f[c](d)')
(anonymous function) (bootstrap.min.js, line 7)
each (jquery.js, line 657)
each (jquery.js, line 266)
modal (bootstrap.min.js, line 7)
ready (application.js, line 23)
fire (jquery.js, line 3049)
fireWith (jquery.js, line 3161)
ready (jquery.js, line 434)
completed (jquery.js, line 105)

任何帮助都将不胜感激。

Answer 1

基于一些评论和我自己的一些变化，我有模式工作。我删除了引导-模态-rails创业板，并从现有的引导sass创业板中导入了该模式。

Gemfile

group :assets do
    gem 'sass-rails', '4.0.1'
    gem 'bootstrap-sass', '3.0.2.0'
end

application.js

//= require jquery
//= require turbolinks
//= require bootstrap
//= require bootstrap/modal
//= require_tree .

建议我将我的gifts.js.coffee改为gifts.js gifts.js

jQuery(document).ready(function($){
  $('#myModal').modal('options')
  var body = $( 'show' );
});

index.html.erb

<p><%= link_to 'Buy', gift_path(gift), {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal', :class => "btn btn-primary ", 'data-type' => "html" } %></p>
                </div>
                <!-- Modal -->
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <%= render partial: 'show', :locals => { :gift => gift } %>
                            </div>
                        </div>
                    </div>
                <!-- End of Modal -->

gifts_controller.rb

def show
        @gift = Gift.find(params[:id])
        respond_to do |format|
          format.html {render :show}
          format.json { head :ok}
        end
end

谢谢大家的帮助。

Answer 2

$ ->
  $('#myModal').modal('options')

$ ->确保在页面DOM准备就绪时运行代码。