rails 4 bootstrap 3 ajax modal

我忙於學習Rails 4，當用戶點擊一個鏈接時，我想顯示一個引導彈出窗口模式，當模式打開時它需要顯示與該特定記錄相關的信息。繼承人我到目前爲止所做的，只是沒有顯示實際的模式彈出窗口，但傳遞正確的參數。rails 4 bootstrap 3 ajax modal

index.html.erb頁面有：

<%= link_to "view", work_path(w), remote: true, :"data-toggle" => 'modal', :"data-target" => '#myModal' %> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

我也有一個作品/ _modal.html.erb：

<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"></h4> 
    </div> 
    <div class="modal-body"> 
    <%= @work.name %> 
    </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> 
</div>

也有作品控制器：

def show 
    @work = Work.find(params[:id]) 
    if request.xhr? 
    respond_to do |format| 
     format.html {render :partial => 'modal'} 
     format.json {head :ok} 
    end 
end 
end

最後一個作品/ show.js.erb：

$("#myModal").html("<%= escape_javascript(render 'modal') %>");

我希望我在這裏很容易失去一些東西。在控制檯中，我可以看到下面的消息，所以我知道它返回正確的信息，但遺憾的是它沒有顯示模態：

Started GET "/works/8" for 127.0.0.1 at 2014-03-03 09:31:12 +0000 
Processing by WorksController#show as JS 
Parameters: {"id"=>"8"} 
Work Load (0.2ms) SELECT "works".* FROM "works" WHERE "works"."id" = ? LIMIT 1 [["id", 8]] 
Rendered works/_modal.html.erb (4.9ms) 
Completed 200 OK in 8ms (Views: 6.3ms | ActiveRecord: 0.2ms)

任何幫助是極大的讚賞。

來源

2014-03-03 drac

您已經添加了ID爲「myModal」一個div？ –

是的，在index.html.erb中有一個div，id =「myModal」 – drac

嘗試換一種方式。通過這種方式，我們將使用顯式的javascript命令顯示模式彈出窗口。

在index.html.erb

<%= link_to "view", work_path(w), remote: true, class: 'static-popup-link'%> 

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">Loading...</div>

在的application.js

$(document).ready(function() { 

    var clickOnPopupLink = function(){ 
    $('body').on('click', '.static-popup-link', function(){ 
     $('#myModal').modal('show'); 
    }); 
    } 

    clickOnPopupLink(); 

});

在控制器

def show 
    @work = Work.find(params[:id]) 
end

在show.js.erb

$('#myModal').html("<%= j render("/works/modal")%>")

來源

2014-03-03 10:43:04

沿着同樣的路線，我做了一個Gist來展示如何通過bootstrap3對話框完成所有「確認」鏈接。 https://gist.github.com/Genkilabs/bdcc5f62c5b46a8e0904 – genkilabs

請確保您在雙引號內嵌入單引號： '$（'＃myModal'）。html（「<％= j render（'/ works/modal' ）％>「）' –

@ bachan-smruty任何想法爲什麼這會顯示模態淡出，但不是模態對話框？我可以從網絡/導軌控制檯看到所有資源正在渲染，但是我只能淡入淡出而沒有可見的形式？ –

您還需要顯示模式，增加$('#myModal').modal('show')在show.js.erb

$("#myModal").html("<%= escape_javascript(render 'modal') %>"); 
$('#myModal').modal('show')

來源

2014-03-03 10:46:53

rails 4 bootstrap 3 ajax modal

回答

相關問題