Подтвердить что ты не робот

Rails 4 выполняет частичное с ajax, jquery,: remote => true и reply_to

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

Лучшее сообщение в блоге, которое я мог найти по этому вопросу, было здесь: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

Вопрос: как мне закодировать приложение rails, чтобы я мог запускать частичное представление для загрузки через AJAX при отправке формы или нажатии ссылки?

4b9b3361

Ответ 1

Для этого необходимо присутствовать несколько вещей, в том числе: remote = > флаг true в элементе запуска, флаг response_to: js в определении класса контроллера, частичный вид и, наконец, jquery на самом деле рендеринг динамической частичной части должен содержаться в отдельном файле .html.js.

Примеры ниже приведены для фиктивного метода" render_partial_form "контроллера" someajax".


1) Добавить: remote = > флаг true в элемент запуска
поставьте флаг: remote = > true в теге ссылки или формы в файле .html.erb(представление) для элемента, который вы хотите вызвать вызов AJAX, например

<%= form_tag("/someajax", method: 'post', :remote => true) do %>

с: remote = > true, rails не будет автоматически переключать представления, что позволяет запускать JQuery. Это можно использовать с тегами form_tag, link_tag или других типов.


2) Добавьте "reply_to: html,: js" в верхней части контроллера

В верхней части определения класса контроллера вы должны теперь указать, что контроллер может отвечать на javascript, а также на html:

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

В этом примере переменная передается из контроллера в представление: массив параметров списка выбора, называемый @array_from_controller.


3) Проложите http-глагол к вашему методу контроллера

Поскольку я хотел, чтобы форма POSTED вызывала вызов AJAX, я направил пост-глагол для моего контроллера в представление render_partial_form.

post 'someajax' => 'someajax#render_partial_form

Метод контроллера, определенный def render_partial_form, совпадает с именем представления _render_partial_form.html.erb, поэтому нет необходимости вызывать действие визуализации с контроллера.


4) Создайте частичный вид
Частичный вид должен иметь то же имя, что и ваш метод контроллера, и начинаться с подчеркивания: _render_partial_form.html.erb

<h3>Here is the partial form</h3>

<%= form_tag("/next_step", method: 'post') do %>
    <%= label_tag(:data, "Some options: ") %>
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
    <%= submit_tag('Next') %>
<% end %>


5) Создайте файл JQuery

Операторы JQuery запускают визуализацию формы. Замените "render_partial_form" на фактическое имя вашего метода контроллера и частичного представления. Эффект slideDown является необязательным "глазной конфеткой". Создайте файл с расширением .js.erb и тем же именем, что и ваш контроллер:



render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
$('#render_partial_form').slideDown(350);

Ответ 2

Вы должны использовать JS-представления (которые имеют расширение js.erb), что-то вроде "create.js.erb" для создания действия контроллера. Затем добавьте format.js в блок respond_to do |format| ... end. И добавьте параметр remote: true в вашу форму. Обратите внимание: js.erb должен содержать код Javascript, который необходимо включить, например:

$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")

Ответ 3

Для чего это стоит (потому что я с этим справился в обновлении приложения с Rails 2 до 3): вы также можете сделать это, добавив обработчик событий, который добавляет возвращенный HTML, например, используемую ранее библиотеку прототипов Rails 2 сделать.

Если, например, вы пытаетесь принять это (подготовьтесь к предложению):

form_remote_tag url: {...}, update: ...

Если ответ приходит как HTML и добавляется автоматически, и замените его на это:

form_tag {...}, remote: true

Добавив обработчик событий в ваш application.js файл, который просто сделает то же самое, добавив содержимое к определенному элементу, например:

$("#myform").on('ajax:success', function(e, data, status, xhr) {
  $("#container").append(data);
)};

Тогда... вы можете столкнуться с той же проблемой, что и я, потому что она никогда не запускает событие ajax:success! Проблема в том, что он ожидает JS или текст в ответе, но он получает HTML. Способ исправить это, чтобы сказать, что ответ будет HTML с использованием атрибута в теге формы:

form_tag {...}, remote: true, data: {type: :html}

Кусок торта!