我有一个属性搜索页面(:controller =>'properties',:action =>'index'),它包含一个右侧边栏,其中包含一个搜索表单,用于在表单下方显示搜索结果。当用户点击右侧边栏中的属性时,我想在左侧索引页面的主区域中显示该属性的详细信息。
右侧边栏是一个名为properties / _property.html.erb的部分:
<%= form_tag properties_path, :method => 'get' do %>
<%= text_field_tag 'location', (params[:location]) %>
<%= select_tag(:max, options_for_select([['No Max', ""], ['$100,000', 100000], ['$200,000', 200000], etc %>
more search fields for baths beds etc
<%= submit_tag "Search", :name => nil %>
<% end %>
<% @properties.each do |property| %>
<%= link_to([property.Address,property.City].join(", "), {:action => 'show', :id => property.id}) %>
<li><strong><%= number_to_currency(property.Price, :precision => 0) %></strong></li>
etc etc
<% end %>
我知道如何显示属性详细信息的唯一方法是使用'show'操作,但这会将用户带到新页面,例如localhost:3000 / properties / 1865。我使用与'index'视图相同的布局制作了'show'视图,并使右侧边栏成为部分(properties / _property.html.erb),它出现在'show'和'index'上,所以当用户点击右侧边栏中的属性并转到localhost:3000 / properties / 1865,属性详细信息在主区域中正确显示,右侧边栏在右侧。
但是因为localhost:3000 / properties / 1865是一个与localhost:3000 / properties / index不同的页面,右侧边栏中的搜索表单已经忘记了它的参数,这意味着右侧边栏中的搜索结果列表已经改回所有属性的默认列表。
如何在索引页面的部分内显示“show”操作,以便右侧边栏中的表单记住用户的搜索参数?或者,如果我必须转到“显示”页面,我怎样才能使右侧边栏保持原样?
任何想法都非常感激,只是在正确的方向上提出建议会很好,花了一整天时间试图解决它并且无处可去,谢谢
答案 0 :(得分:2)
我使用与索引视图相同的布局制作了show视图 使右侧边栏成为局部(property / _property.html.erb) 它出现在节目和索引上。
是的,但这只能为两个页面提供类似的布局。您希望列表在不同请求之间保持不变。
你基本上有两种选择。使用会话记住我不推荐的列表。
其他是你使用的形式:remote =&gt; true或ajax并部分更新页面。
修改强>
您使用的是哪种版本的导轨?你的应用程序中是否加载了jquery?
关注此SO POST。
您可能需要稍微改变您的节目动作。
respond_to do |format|
format.js {render :partial => 'property_details' ,:layout => false}
format.html
end
为属性详细信息创建一个部分,只需将正文内容放在此处。
链接看起来像
<%= link_to "link name", {:action => :show, :id => item_id}, :remote => true ,:html => {:class => 'links_product'} %>
还要更新您可能使用的视图(确保页面中有rails.js):
$(document).ready(
function(){
$("a.links_product").bind("ajax:success",
function(evt, data, status, xhr){
$("#response").html(data); // in case data is html. (_*.html.erb)
}).bind("ajax:error", function(evt, xhr, status, error){
console.log('server error' + error );
});
});
拥有ID为response
的div或任何有效ID。完成!