用AJAX搜索，很好！如何正确显示结果？

Question

我跟着this tutorial添加AJAX到我的Rails3.1搜索框（一切工作正常）。此搜索框位于侧栏中，我想在主列中显示结果。我遇到的问题是我不知道如何正确使用。

在AJAX之前，我有一个带代码的search.html.haml来显示结果。但是，如果我加渲染部分呼叫这里没有得到显示（我猜是因为search.html.haml不会被调用）

search.html.haml

=@events.count 
#search=render 'search' 

。另一方面，如果我将渲染部分调用放在application.html.haml中。它确实显示结果，但显示在主列的实际内容下面。

application.html.haml

 #central 
     %p#notice= notice 
     = yield 
     #search=render 'search' 

我想这是一个简单的修复，但不知道如何去做。

在此先感谢！

_search.html.haml

-@events.each do |event| 
    #user_block 
    #user_block_pic 
     = image_tag(event.pic.url(:medium), class: 'event_block_image', :alt =>'Event Picture') 
     ....more stuff 

search.js.erb

$('#search').html("<%= escape_javascript(render(:partial => 'search')) %>"); 

我该怎么做才能摆脱什么是对的主柱（#central）并显示结果在那里？

固定!!!!工作中！！！！ （因为我必须等待几个小时才能发布答案我在这里做）

我不确定这是否是正确的编码，但为我工作。我所做的是摆脱了中间文件search.html.haml（见上文）

而现在的配置是这样的：

application.html.haml

#central 
     %p#notice= notice 
     = yield 

_search.html .haml

#search 
=@events.count 
-@events.each do |event| 
    ...stuff 

资产/ JavaScript的/ search.js

$(function(){ 
$("#search .pagination a").live("click", function(){ #this is for pagination 
    $.getScript(this.href); 
    return false; 
}); 
$('#events_search').submit(function() { #this is for the search form 
    $.get(this.action, $(this).serialize(), null, 'script'); 
    return false; 
    }); 
}); 

的意见/事件/ search.js.erb

$('#central').html("<%= escape_javascript(render(:partial => 'search')) %>"); 

它工作正常的我。希望这可以帮助其他人。

感谢

Answer 1

当您搜索方法从AJAX调用叫就是了呈现search.js.erb或HAML我想，但我不使用HAML，只有ERB。

，那么你创建一个search.js.erb，这里是我的search.js.erb的例子：

$("#user-browser").replaceWith("<%= escape_javascript render(:partial => 'list') %>"); 
$("#tabs-interval").replaceWith("<%= escape_javascript render(:partial => 'tabs-interval') %>"); 

所以我所有的雇员再培训局所做的是使用jQuery找到div的我希望以更新HTML，使用所呈现的谐音并替换它们中的html。

我的谐音看起来像这样在ERB：

文件：list.html.erb：

<div id="user-browser"> 
    <span>more html stuff</span> 
</div> 

文件：tabs-interval.html.erb：

<div id="tabs-interval"> 
    <span>more html stuff</span> 
</div>