Ruby on Rails:在其他内容中重新加载视图

时间:2015-10-27 16:36:04

标签: ruby-on-rails ruby ruby-on-rails-4

我有两个名为_show.html.erbindex.html.erb的视图 _show.html.erb内部index.html.erb呈现{。}} 我想仅在_show.html.erb内重新加载index.html.erb部分 选择下拉列表时。

tests/_show.html.erb档案:

<div class="main_content" >
<% @tests.each do |x| %> 
        <%# if x.name ==  @str %>
        <p>Here it is <%= x.name %> your rating in Programming languages</p>
        <% x.languages.each do |a,b| %> 
            <%= a %> <strong> : </strong> <%= b*10 %></br>
        <% end %>
        <p>State: <strong><%=x.state%></strong></p>
        <%# end %>
<% end %>
</div>

tests/index.html.erb档案:

<p>Find me in app/views/tests/index.html.erb</p>
<%= select_tag :name,options_for_select(@tests.map{|u| [u.name]}.uniq), remote: true, id: "update_select" %>
<% @str = "<span id=\"product-modal\">Ashrith</span>".html_safe %>
        <%= @str %>
    <%= render "show" %>

application.js档案:

$(document).ready(function(){
    $("#update_select").change(function()
    {
        drop = $(this).val();
        alert(drop);
        $("#product-modal").html(drop);
    });
});

从上面的文件中选择下拉列表时,下拉列表的值应等同于_show.html.erb。除此之外的任何方法都可以。更多的rubist,更好。

1 个答案:

答案 0 :(得分:1)

我们假设你正在渲染帖子。我会让Posts #index动作响应html和js。在html上它呈现整个页面,在JS上它只替换页面上的帖子而不是过滤器(在你的情况下是一个下拉列表)。此外,由于您往往需要在页面上使用多个过滤器,因此我希望将所有过滤器放在自动提交的表单中。例如:

<%= form_tag posts_path, remote: true, method: :get, data: {bind: true} %>
  ... Place filtering dropdowns and other controls here...
<% end %>

<div id="posts">
  <%= render @posts %>
</div>

<script type="text/javascript">
  $("form[data-bind]").find('input').on('change', function () {
    $(this).closest('form').submit);
  });
</script>

请注意,上面的JS不必放在视图文件中,只是为了使示例简单。它可以放置和使用项目范围的JS。控制器:

 class PostsController
   def index
     @posts = Post.all
     @posts.where(some_field: params[:some_form_filter) if params[:some_form_filter]

     respond_to do |format|
       format.html
       format.js
     end
   end
 end

JS响应替换了app / views / posts / index.js.erb中的jquery页面内容:

 $('#posts').html("<%= j(render @posts %>");

注意:这篇文章是从臀部完成的,所以你可能需要在这里和那里纠正一些小事。