Как сделать асинхронный вызов в Rails и показать результат в текущем представлении?

Question

Я работаю над приложением rails, которое на основе пользовательского ввода из выпадающего списка [назовите его страницей запроса], обрабатывает базу данных db и возвращает результат на новой странице. В основном страница перезагружается и показывает страницу результатов [называть ее страницей результатов].

Мне нужно показать страницу результатов, добавленную под текущими элементами страницы запроса. Я пытался некоторое время и не смог этого достичь.

Страница моего запроса: (rtes / r4d.html.haml)

= form_tag({:controller=>"r4d", :action=>"result"}, method: :get) do
  = label_tag(:q, "Trip Type: ")
  = select_tag(:q, options_for_select([["a",1],["b",2]),include_blank: 'Select one', required: true, class:"select")
  = submit_tag("Get Test Details")

Моя страница контроллера, которая обрабатывает запросы к БД: (controllers / r4d_controller.rb)

class R4dController < ApplicationController
@@client=DynamoDBModel.new
def result

  result= case params[:q]
  when "1"
    @@client.1
  end

  @answer = result.value
  render "r4d/result" 
end
end

Как вы видите, я рендую результат в "r4d / result"

Мой файл результатов: (r4d / result.html.haml)

%table{:id => "secondary"}
  %tr
    %th Key
    %th Value
%tr
  %td Trip ID
  %td #{answer}

Как я могу сделать этот рендер на той же самой странице запроса? Когда пользователь выбирает раскрывающийся список и отправляет вызов, его необходимо сделать асинхронным, а результат должен быть обновлен на той же странице. Если пользователь делает еще один вызов, существующий результат должен быть обновлен новым.

Ваша помощь высоко ценится. Благодаря.

Answer 1

Без HAML я бы так и сделал:

На странице запроса измените строку form_tag, включив в нее remote: true, чтобы форма отправлялась с ajax. Как это:

<%= form_tag({controller: "r4d", action: "result"}, method: :get, remote: true) do %>

Также поместите пустой div в нижней части страницы, чтобы получить результаты и дать ему идентификатор:

<div id="query-results"></div>

В действии контроллера укажите, что он отвечает на ajax-запрос, заменив вызов render на вызов responds_to, подобный этому:

@answer = result.value
respond_to :js

Затем создайте соответствующий файл javascript, чтобы поместить ответ на страницу. Он должен быть под /app/views/r4d/, и в моем случае (без HAML) файл будет называться result.js.erb, чтобы соответствовать имени действия. Это будет содержимое (я использую jQuery здесь):

$('#query-results').html("<%= j render(partial: 'answer_table', locals: {answer: @answer}) %>");

Это сделает частичный HTML-код /app/views/r4d/_answer_table.html.erb, передав его как локальный ответ, затем сделает рендеринг в безопасную строку javascript (это то, что делает j), а затем, когда js запустится, заменит любой контент в этом div, который мы сделали с новым рендерингом.

Теперь нам просто нужно частичное (`/app/views/r4d/_answer_table.html.erb):

<table id="secondary">
  <tr>
    <th>Key</th>
    <th>Value</th>
  </tr><tr>
    <td>Trip ID</td>
    <td><%= answer %></td>
  </tr>
</table>

Вы должны будете выполнить конвертацию в HAML самостоятельно (или просто запустить ее через онлайн-конвертер).