Bootstrap 3 Modal with Rails 4沒有顯示

我問了一個有關此問題的問題，但遇到了另一個錯誤。我有Index.html.erb與link_to調用模態。一旦模態打開，我希望它的主體包含一個部分。我的大部分代碼都來自Bootstrap示例，因爲我希望在將所有表單詳細信息包含在部分內容之前先讓它工作。Bootstrap 3 Modal with Rails 4沒有顯示

的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（在資產/ Javascript角/）

$('#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

當我點擊瀏覽器中的按鈕，我的導軌條款伊納勒顯示此：

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)

任何幫助將不勝感激。

來源

2013-12-18 Questifer

這可能是因爲turbolinks添加您的模態文檔準備好http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links –

該請求正在尋找爲JS的迴應。添加''數據類型'=>「html」'到你的鏈接。 – spas

@SamD我對JS文件進行了建議的更改以處理turbo鏈接。沒有改變。 – Questifer

基於一些評論和我自己的一些改變，我有模態工作。我刪除了bootstrap-modal-rails gem，並從現有的bootstrap sass gem中導入了模型。

的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

感謝大家的幫助。

來源

2013-12-19 23:49:13 Questifer

-1

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

$ ->確保代碼在頁面DOM準備就緒時運行。

來源

2013-12-18 17:58:12 NARKOZ

Bootstrap 3 Modal with Rails 4沒有顯示

回答

相關問題