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

Question

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

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

1. 更改所选div的背景颜色以显示它已被选中(此部分已正常工作).

2. 在空div中渲染特定于所选对象的内容.显示页面的链接将包含在呈现的内容中.这基本上就像快速浏览/预览一样.

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

我的问题:

第二点我遇到了麻烦.单击location元素时,我似乎无法获得部分渲染.过去一周我尝试过很多不同的事情.有迹象表明,已经得到了我近几个例子(Rails 3中-的link_to调用部分使用jQuery阿贾克斯,渲染使用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');
    });
});

Answer 1

在离开这个问题一段时间后,我终于找到了问题(有多个).最后一些关闭!!

1. 我在jquery代码中出现了部分错误.
2. 我没有在我的控制器方法中定义任何东西.

我从中学到的最大好处是服务器日志的强大功能.如果有人遇到类似问题,请检查服务器日志 - 尤其是在调试jquery时.多么有用的工具!根据您的操作(如渲染部分),rails可能无法在您的浏览器中呈现您的错误消息,但它可能仍会显示在您的服务器日志中.对我来说,这是一个与我的偏见相关的错误.希望在路上能节省至少一个人一点时间.

这是下面的最终工作代码.请注意,我也改变了一些命名约定和html结构.

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="sidebar">
  <div id="locations">
    <%= render 'locations' %>
  </div>
</div>
<div id="content">
  <div id="location-quickview">
    <h2>Select a Country...</h2>
  </div>
</div>

_locations.html.erb

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

_quickview.html.erb

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

的routes.rb

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

locations_controller.html.erb

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

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

quickview.js.erb

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