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 way.

Step # 1:

Запустите AJAX с remote: true.Вы уже делаете это.

Шаг # 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 %>.Это странно и, вероятно, неправильный синтаксис.