Rails：如何使用Ajax调用刷新表搜索结果

Question

我试图使用表单搜索MongoDB集合。我想要做的是使用Ajax动态更新我的结果，而不是在每个搜索表单提交后刷新页面。我怎样才能在Rails中解决这个问题？

scenarios_controller：

class ScenariosController < ApplicationController
before_action :set_scenario, only: [:edit, :update]
before_action :all_scenarios, only: [:index, :create, :update]
respond_to :html, :js

def index
  @scenarios = if params[:submitter].blank? && params[:application].blank? && params[:pillar].blank? && params[:test_type].blank? && params[:begin_date].blank? && params[:end_date].blank? && params[:search_text].blank?
               Scenario.all.order_by(created_at: :desc)
             else
               Scenario.search_text(params)
             end
end

index.html.erb：

...
<div id="search_form_class">
  <%= render 'search_form', remote: true %>
</div>

<div id="results_class">
  <%= render 'results', remote: true %>
</div>
...

_search_form.html.erb：

<%= form_tag(scenarios_path, remote: true, method: 'get', id: 'search-form', role: 'form') do %>
<%= select_tag :submitter, include_blank: true, class: "form-control" %>
<%= select_tag :application, include_blank: true, class: "form-control" %>
...
<% end %>

_search_form.js.erb：

$('#search-form').html("<%= j (render 'search_form', scenario: @scenario) %>")

_results.html.erb：

<table class="table table-striped" style="max-height: 800px; overflow:scroll;">
  <thead>
  <tr>
    <th>Export?</th>
    <th>Submitter</th>
    <th>Scenario Name</th>
    <th>Scenario Body</th>
    <th>Created</th>
    <th>Modified</th>
    <th>Test Type</th>
    <th>Application</th>
    <th>Pillar</th>
    <th>Options</th>
    <th colspan="8"></th>
  </tr>
  </thead>
  <tbody>
  <% @scenarios.each do |scenario| %>
    <tr>
      <td class="text-left"><%= check_box_tag('compare') %></td>
      <td class="text-left"><%= scenario.submitter %></td>
      <td class="text-left"><%= scenario.scenario_name %></td>
      <td class="text-left"><%= scenario.scenario_body %></td>
      <td class="text-left"><%= scenario.created_at %></td>
      <td class="text-left"><%= scenario.updated_at %></td>
      <td class="text-left"><%= scenario.test_type %></td>
      <td class="text-left"><%= scenario.application %></td>
      <td class="text-left"><%= scenario.pillar %></td>
      <td><%= render 'options', scenario: scenario %></td>
    </tr>
  <% end %>
  </tbody>
</table>

Answer 1

您缺少一些实现所需要的重要步骤。以下是AJAX以Rails方式工作所需的必要步骤。

步骤1：

用remote: true触发AJAX。你已经这样做了。

第2步：

通过定义remote: true，请求将作为JS发送到控制器操作。您需要编写JS请求需要完成的操作。

def index
  if params[:submitter].blank? && params[:application].blank? && params[:pillar].blank? && params[:test_type].blank? && params[:begin_date].blank? && params[:end_date].blank? && params[:search_text].blank?
    @scenarios = Scenario.all.order_by(created_at: :desc)
   else
    @scenarios = Scenario.search_text(params)
  end

  respond_to do |format|
    format.html
    format.js
  end
end

第3步：

使用以下代码在index.js.erb下创建/views/scenarios

$('#results_class').html("<%= j (render 'results', scenarios: @scenarios) %>")

你需要在@scenarios中将scenarios更改为_results.html.erb

第4步：

改变这个

<%= render 'results', remote: true %>

对此

<%= render 'results', scenarios: @scenarios %>

避免潜在的错误。

同时删除remote: true这里<%= render 'search_form', remote: true %>。这很奇怪，可能是错误的语法。