ruby-on-rails - simple - ruby on rails ajax example
Rails turbolinks rompen enviar formulario remoto (2)
Turbolinks no recarga completamente tu página, sino solo una parte. Esto es lo que los hace tan rápidos, sin embargo, si tiene JavaScript que requiere una recarga de página completa, tendrá problemas. La razón por la que funciona con una actualización es porque ahora fuerza a la página a recargarse por completo.
Editar: Vale la pena probar esta joya: https://github.com/kossnocorp/jquery.turbolinks
Para obtener un poco de información adicional sobre el funcionamiento interno de turbolinks: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
O bien: https://github.com/rails/turbolinks
Ps También asegúrese de que javascript_include_tag esté dentro de la etiqueta head (y no en el cuerpo)
Tengo un problema bastante extraño al usar Rails 4, Turbolinks y una forma remota. Tengo un formulario que se parece a:
<%= form_for [object], remote: true do |f| %>
<td><%= f.text_field :name, class: ''form-control'' %></td>
<td><%= f.email_field :email, class: ''form-control'' %></td>
<td><%= f.submit button_name, class: ''btn btn-sm btn-primary'' %></td>
<% end %>
Esta forma agrega (crea) un nuevo objeto. Sin embargo, no siempre funciona:
- Cuando cargo la página directamente usando la URL o una actualización; funciona
- Cuando navego desde mi aplicación a esta página; falla
Al deshabilitar Turbolinks para este enlace, la página funcionó perfectamente.
Tengo dos preguntas:
- ¿Por qué esto no funciona? ¿Esto se debe a que los controladores remotos no están conectados al botón debido a un problema de JQuery / Turbolinks?
- ¿Cómo puedo solucionar este problema?
Gracias por adelantado.
Solución
Gracias a @ rich-peck, la solución fue agregar una pieza de javascript que envía manualmente el formulario al hacer clic en el botón:
<%= javascript_tag do %>
var id = "#<%= dom_id(f.object) %>";
var inputs = $(id).parent().find(''input'');
console.log(inputs);
$(id).parent().find(''button'').on(''click'', function(e) {
e.preventDefault();
$(id).append(inputs.clone());
$(id).submit();
});
<% end %>
Este código agrega javascript a la fila de la tabla de formularios, obteniendo las entradas, anexándolas al ID y enviando el formulario. El preventDefault (); impide que la consulta se envíe dos veces cuando la página se actualiza y el formulario realmente funciona.
Turbolinks
Como se mencionó, el problema con Turbolinks es que recarga la parte <body> del DOM con una llamada ajax, lo que significa que JS no se recarga, ya que está en la cabeza
La forma típica de solucionar este problema es delegate su JS del document , así:
$(document).on("click", "#your_element", function() {
//your code here
});
Debido a que el document siempre estará presente, activará el JS continuamente
Remoto
Con tu problema, es un poco más complicado
El problema es que confías en el motor JQuery UJS (JavaScript discreto) de Rails, que es difícil de remediar por sí mismo.
Nunca hemos tenido este problema y usamos Turbolinks todo el tiempo, así que supongo que el problema podría estar relacionado con la forma en que está construyendo su formulario / tramitando la solicitud. Este GitHub parecía recrear el problema, y tenía que ver con la tabla
Tal vez podrías intentar:
<%= form_for [object], remote: true do |f| %>
<%= f.text_field :name, class: ''form-control'' %>
<%= f.email_field :email, class: ''form-control'' %>
<%= f.submit button_name, class: ''btn btn-sm btn-primary'' %>
<% end %>