2014-03-05 68 views
2

我有两个模型组和镜头。从我的#show页面组中,我需要一个模式窗口,可以显示我所有镜头的列表。下面是相关代码...Rails显示从另一个模型的索引模式的引导模式

应用程序/视图/组/ show.html.erb

<%= link_to "Add Exsisting Shot", shots_path, id: "shot-modal", remote: true %> 

应用程序/视图/张/ modal.js.erb

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

应用程序/控制器/ shots_controller.rb

def index 
    @shots = Shot.all 
    respond_to do |format| 
     format.html # index.html.erb 
     format.js # index.html.erb 
     format.json { render json: @shots } 
    end 
    end 

当我点击“添加现有射击”链接,我做AA型号排序的,轮流在谁屏幕灰色的,但我不是获取任何内容。我可以点击屏幕上的任何地方,它将我带回到我的演示页面。我也没有在控制台中发现任何错误。

编辑

应用程序/视图/张/ _modal.html.erb

<div class="modal fade" id="shot-modal" tabindex="-1" role="dialog" aria-labelledby="shot-modal-label" 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="shot-modal-label">Modal title</h4> 
     </div> 
     <div class="modal-body" id="shot-modal-body"> 
     <table> 
      <tr> 
      <th>Name</th> 
      <th>Comedian</th> 
      <th></th> 
      <th></th> 
      <th></th> 
      </tr> 

     <% @shots.each do |shot| %> 
      <tr> 
      <td><%= shot.name %></td> 
      <td><%= shot.comedian.name %></td> 
      <td><%= image_tag shot.pic.url(:thumb) %></td> 
      </tr> 
     <% end %> 
     </table> 
     </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> 
</div> 

回答

1

两件事情:

1 - 如果你有这样一个模式:

<div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-labelledby="product-modal-label" 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="product-modal-label">Modal title</h4> 
     </div> 
     <div class="modal-body" id="product-modal-body"> 
     ... 
     </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> 
</div> 

那么你不应该使用$("#product-modal").html(...,因为你会覆盖很多重要的div s在模态中。您应该使用$(".modal-body","#product-modal").html(...或如上所述设置模态体的ID并使用$("#product-modal-body").html(...

2 - 渲染不起作用。当你从视图中运行渲染命令时,它正在寻找一个部分。所以,你的JavaScript实际上应该看起来是这样的:

$("#product-modal").html("<%= escape_javascript(render 'allshots') %>") 

然后你应该把HTML中app/views/shots/_allshots.html.erb显示你的镜头。

+0

谢谢mccannf ...这很有帮助。请参阅上面添加的修改/添加。当我点击我的链接时,我会看到一个灰色的屏幕,但我没有看到任何内容。 – Lumbee