使用 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

assets/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;
  });
 });

views/events/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') %>");

所以我的 erb 所做的就是使用 jquery 来查找我想要更新 html 的 div，使用呈现的部分并替换其中的 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>