Question

我在Rails开发音乐网站。登录页面被划分并有一个搜索表单，您可以在其中查找存储在数据库中的频段。在另一个部门里面，我嵌入了播放一些随机视频的播放器。我希望搜索结果显示在同一个目标网页上。

当我提交表单时，页面重新加载并且播放器也重新加载并开始播放不同的视频。我实际想要实现的是在提交搜索表单时玩家不会被打断。

不知道我希望它是否以及如何实现。如果我做对了this link描述了一种方法，但我没有让它发挥作用。

家庭控制器

def index
  @bands = Band.search(params[:search]).order("name ASC")
  @random_band = Band.order("RANDOM()").limit(1) 
end

def preview
  @bands = Band.search(params[:search]).order("name ASC")
  render :partial => 'preview', :content_type => 'text/html'
end

_preview.html.erb

<table class="table"  
  <tr>
    <th>Title</th>
    <th>Year</th>
  </tr>
  <% @bands.each do |f| %>
    <tr>
      <td>
        <%= f.name %>
      </td>
    </tr>
  <% end %>
</table>

家＃索引

<!DOCTYPE html>
  <html lang="en">

    <form class="navbar-form navbar-left" role="search">
      <%= form_tag({:action => 'preview'}, id: "search-form", :remote => true, :'data-update-target' => 'update-container') do %>
      <%= text_field_tag :search, params[:search], placeholder: "Search Bands" %>
      <%= submit_tag "Search" %>
      <% end %>
     </form>



<div class="row">
  <div class="col-md-6">

    <div id="update-container">
      <%= @random_band.first.name %>
    </div>

    </div>
    <div class="col-md-6">
      <%= video_tag("#{@random_band.first.name}.mp4", size: "460x390",
        controls: true, autobuffer: true, autoplay: true) %>
   </div>
 </div>


</html>

的application.js

$(function() {
/* Convenience for forms or links that return HTML from a remote ajax call.
The returned markup will be inserted into the element id specified.
 */
$('form[data-update-target]').live('ajax:success', function(evt, data) {
    var target = $(this).data('update-target');
    $('#' + target).html(data);
  });
});

第一个问题：表单似乎没有找到预览操作。

第二个问题：如果我使用预览操作更改索引的内容，它确实会发现预览操作，但它不会在更新容器内呈现搜索结果。相反，它将它们呈现为一个完整的新页面。

顺便说一下，我对Rails了解了一下，但我对Ajax没有任何经验。

Answer 1

据我所知，你的大部分代码都非常扭曲而且并不是非常精益。在不重新加载页面其余部分（包括您的播放器）的情况下，更新搜索结果的简短且非常精简的方式可能如下所示。索引函数应如下所示：

//bands_controller.rb
def index
  @bands = Band.search(params[:search])
end

您必须在Band-Model中创建搜索方法：

//Band.rb
def self.search(search)
  if search
    find(:all, :conditions => ['name LIKE ?', "%#{search}%"])
  else
    find(:all)
  end
end

您需要在视图内某处具有特定ID的div中呈现_preview.html.erb：

<div id="bands"><%= render 'preview' %></div>

你的form_tag有很多你不再需要的论据：

<%= form_tag bands_path, :method => 'get', :id => "search_form" do %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
<% end %>

我用于表单的jquery看起来像这样..在我看来非常简单：

$(function() {
  $("#search_form input").keyup(function() {
    $.get($("#search_form").attr("action"), $("#search_form").serialize(), null, "script");
    return false;
  });
});

每次在搜索字段中输入一个字母时，都会触发index.js.erb（你必须创建它）：

//index.js.erb (same folder as index.html.erb)
$("#bands").html("<%= escape_javascript(render("preview")) %>");

这应该刷新你的div。这可能是一项小工作，但这是在我能想到的索引页面中实现ajax搜索功能的最简单方法。

来源： Railscast#27 Railscast#240

在Rails中部分重新加载页面

1 个答案: