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

回答

相关问题