Rails 3 – 如何使用Jquery基于所选div动态渲染单个对象的部分？

我在Rails 3应用程序中有一个简单的 jquery自动完成搜索,基于 Railscasts episode #240中的一个,通过使用jquery渲染部分来过滤位置索引页面上的位置对象列表.

在partial(_LOCATIOns.html.erb)中,位置对象每个都包含在它们自己的div中,并且样式看起来像一个可点击的元素.当用户点击其中一个时,我希望它做两件事：

>更改所选div的背景颜色以显示它已被选中(此部分已正常工作).
>在空div中渲染特定于所选对象的内容.显示页面的链接将包含在呈现的内容中.这基本上就像快速浏览/预览一样.

这一切都根据当前选择动态变化而不刷新页面.

我的问题：

第二点我遇到了麻烦.单击LOCATIOn元素时,我似乎无法获得部分渲染.过去一周我尝试过很多不同的事情.除了许多其他不相关但遵循类似策略的例子之外,还有几个例子让我接近(Rails 3 – link_to to call partial using jquery ajax,Render a partial in rails using jquery).

我怀疑这可能是一个问题,我在局部中称之为局部,但我不确定.我在下面提供了我的代码.当我试一试时,我被带到一个空白页面,地址如下：localhost：3000 / LOCATIOns / 1 / show_quickview

在此先感谢您的帮助.另外,感谢帮助我走到这一步 – 你们真棒！

index.html.erb

<%= form_tag LOCATIOns_path,:method => 'get',:id => "LOCATIOns_search" do %>
<p>
    <%= text_field_tag :search,params[:search] %>
    <%= submit_tag "Search",:name => nil %>
</p>
<% end %>
<div id="quickview"></div>     #placed here only for tesTing out
<div id="LOCATIOns">
    <%= render 'LOCATIOns' %>
</div>

_LOCATIOns.html.erb

<% @LOCATIOns.each do |LOCATIOn| %>
<div class="LOCATIOn">
    <h4><%= link_to LOCATIOn.name,show_quickview_LOCATIOn_path(:id => LOCATIOn.id),:remote => true %></h4>
</div>
<% end %>

_quickview.html.erb

<p><%= LOCATIOn.name %></p>     #keeping it simple for Now

的routes.rb

resources :LOCATIOns do
    member do
      get 'show_quickview'    
    end
  end

LOCATIOns_controller.rb

def show_quickview
    respond_to do |format|
      format.js { render :layout => false }
    end
  end

show_quickview.js.erb

$("#quickview").html("<%= escape_javascript(render(:partial => "quickview",:locals => { :LOCATIOn => LOCATIOn }))) %>");

的application.js

$(function() {
  $("#LOCATIOns_search input").keyup(function() {
    $.get($("#LOCATIOns_search").attr("action"),$("#LOCATIOns_search").serialize(),null,"script");
    return false;
  });
    $(".LOCATIOn").click(function() {
        $(".LOCATIOn").not(this).removeClass('LOCATIOn-clicked h4');
        $(this).toggleClass('LOCATIOn-clicked h4');
    });
});

<%= form_tag LOCATIOns_path,:id => "LOCATIOns_search" do %>
<p>
  <%= text_field_tag :search,params[:search] %>
  <%= submit_tag "Search",:name => nil %>
</p>
<% end %>

<div id="sidebar">
  <div id="LOCATIOns">
    <%= render 'LOCATIOns' %>
  </div>
</div>
<div id="content">
  <div id="LOCATIOn-quickview">
    <h2>SELEct a Country...</h2>
  </div>
</div>

<% @LOCATIOns.each do |LOCATIOn| %>
<div class="LOCATIOn">
  <h4><%= link_to LOCATIOn.name,quickview_LOCATIOn_path(:id => LOCATIOn.id),:remote => true %></h4>
</div>
<% end %>

<p><%= LOCATIOn.name %></p>

resources :LOCATIOns do
  member do
    get 'quickview'    
  end
end

def quickview
  @LOCATIOn = LOCATIOn.find(params[:id])

  respond_to do | format |  
    format.js {render :layout => falsE}  
  end
end

$("#quickview").html("<%= escape_javascript(render(:partial => "quickview",:locals => {:LOCATIOn => @LOCATIOn})) %>");