jquery - simple - ruby on rails ajax example

Rails 4 renderizando un parcial con ajax, jquery, remote=> true y respond_to

Question

Parece que la representación dinámica de una página con AJAX en respuesta a un formulario enviado es común. Ninguna de las otras preguntas similares se centra en cómo hacer esto de una manera general.

La mejor publicación de blog que pude encontrar sobre el tema fue aquí: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

La pregunta: ¿Cómo puedo codificar mi aplicación de rieles para poder activar una vista parcial para cargar a través de AJAX cuando envío un formulario o hago clic en un enlace?

Answer 1

Debe usar las vistas JS (que tienen la extensión "js.erb"), algo así como "create.js.erb" para crear una acción del controlador. Luego, agregue format.js a respond_to do |format| ... end respond_to do |format| ... end bloque respond_to do |format| ... end . Y añada el parámetro remote: true a su formulario. Aviso: js.erb debe incluir el código Javascript que debe incluirse, como:

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

Answer 2

Deben estar presentes varias cosas para que esto funcione, incluida la marca: remote => true en el elemento desencadenante, la bandera respond_to: js en la definición de clase del controlador, la ruta, la vista parcial y, por último, el jquery para generar una dinámica. parcial debe estar contenido en un archivo .html.js separado.

Los siguientes ejemplos son para un método ficticio "render_partial_form" del controlador "someajax".

1) Agregue un indicador: remote => true al elemento activador
ponga la etiqueta: remote => true en el enlace o etiqueta de formulario en su archivo .html.erb (vista) para el elemento que desea activar la llamada AJAX, como

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

con: remote => true, los rieles no cambiarán automáticamente las vistas, lo que permite ejecutar JQuery en su lugar. Esto se puede utilizar con un form_tag, un link_tag u otros tipos de etiquetas.

2) Agregue "respond_to: html,: js" en la parte superior del controlador

En la parte superior de la definición de clase de su controlador, ahora debe especificar que el controlador puede responder tanto a javascript como a html:

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

En este ejemplo, hay una variable que pasa del controlador a la vista: una matriz de opciones de lista de selección llamada @array_from_controller .

3) Dirige el verbo http al método de tu controlador

Como quería un formulario POST para desencadenar la llamada AJAX, enruté el verbo posterior de mi controlador a la vista render_partial_form.

post ''someajax'' => ''someajax#render_partial_form

El método del controlador definido por def render_partial_form coincide con el nombre de la vista, _render_partial_form.html.erb , _render_partial_form.html.erb lo que no es necesario llamar una acción de procesamiento desde el controlador.

4) Crear la vista parcial.
La vista parcial debe tener el mismo nombre que su método de controlador y comenzar con un guión bajo: _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) Crea el archivo JQuery

Las declaraciones de JQuery activan la representación del formulario. Reemplace "render_partial_form" con el nombre real del método de su controlador y la vista parcial. El efecto slideDown es opcional "eye candy". Cree un archivo con la extensión .js.erb y el mismo nombre que su controlador:

render_partial_form.js.erb

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

Answer 3

Para lo que valga (porque me estaba fallando en una actualización de la aplicación de Rails 2 a 3): también puedes hacerlo agregando un controlador de eventos que agregue el HTML devuelto, como solía hacer la antigua biblioteca de prototipos de Rails 2.

Si, por ejemplo, estás tratando de tomar esto (prepárate para una oración de ejecución):

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

Donde la respuesta llega como HTML y se agrega automáticamente, y reemplácela con esto:

form_tag {...}, remote: true

Agregando un controlador de eventos a su archivo application.js que simplemente hace lo mismo, agregando el contenido a un elemento específico, como esto:

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

Entonces ... puedes encontrarte con el mismo problema que tuve, que fue que nunca se dispara el evento de ajax:success El problema es que está esperando JS o texto en la respuesta, pero está obteniendo HTML. La forma de solucionarlo es decirle que la respuesta será HTML utilizando un atributo en la etiqueta de formulario:

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

Pedazo de pastel!