modals - Rails, Javascript no se carga después de hacer clic en link_to helper

modals ruby on rails

Question

Tengo problemas para cargar mi javascript cuando uso un link_to helper in rails. Cuando ingreso manualmente la URL con ''localhost: 3000 / products / new'' o recargo la página, se carga el javascript, pero cuando paso por un enlace como el que se indica a continuación, jQuery $(document).ready no se carga en el nueva pagina.

Link_to, JavaScript no se carga cuando hago clic en este enlace:

<%= link_to "New Product", new_product_path %>

archivo products.js

$(document).ready(function() {
    alert("test");
});

Cualquier ayuda sería muy apreciada. ¡Gracias por adelantado!

Answer 1

¿Estás usando Rails 4? (Averigua haciendo rails -v en tu consola)

Este problema probablemente se deba a la gema Turbolinks recién agregada. Hace que su aplicación se comporte como una aplicación de JavaScript de una sola página. Tiene algunos beneficios ( es más rápido ), pero desafortunadamente rompe algunos eventos existentes como $(document).ready() porque la página nunca se vuelve a cargar. Eso explicaría por qué el JavaScript funciona cuando carga directamente la URL, pero no cuando navega a través de un link_to .

Aquí hay un RailsCast sobre Turbolinks.

Hay un par de soluciones. Puede usar jquery.turbolinks como una solución jquery.turbolinks , o puede cambiar su declaración $(document).ready() para usar el evento de la ''page:change'' Turbolinks ''page:change'' :

$(document).on(''page:change'', function() {
    // your stuff here
});

Alternativamente, puede hacer algo como esto para la compatibilidad con cargas de página regulares, así como Turbolinks:

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on(''page:change'', ready);

Si está utilizando Ruby on Rails> 5 (puede verificar ejecutando rails -v en la consola) use ''turbolinks:load'' lugar de ''page:change''

$(document).on(''turbolinks:load'', ready); 

Answer 2

Asegúrese de no tener ninguna etiqueta <script> línea. (Las etiquetas de guiones en línea son malas con turbolinks).

Answer 3

FWIW, desde los documentos de Turbolinks , el evento más apropiado para capturar en lugar del $(document).ready es page:change .

page:load tiene una advertencia de que no se dispara en las recargas de caché ...

Se ha cargado un nuevo elemento de cuerpo en el DOM. No activa el reemplazo parcial o cuando se restaura una página desde el caché, para no disparar dos veces en el mismo cuerpo.

Y dado que Turbolinks simplemente está cambiando la vista, page:change es más apropiado.

Answer 4

Si está en los raíles 5 en lugar de ''page:change'' debe usar ''turbolinks:load'' esta manera:

$(document).on(''turbolinks:load'', function() {
  // Should be called at each visit
})

Fuente: https://.com/a/36110790

Answer 5

También puede envolver su enlace con un div que especifique data-no-turbolink.

Ejemplo:

<div id="some-div" data-no-turbolink>
    <a href="/">Home (without Turbolinks)</a>
</div>

Fuente: https://github.com/rails/turbolinks

Answer 6

Tengo el mismo problema, pero jquery.turbolinks no me ayudó. Noté que tengo que anular el método GET.

Hay mi muestra:

<%= link_to ''Edit'', edit_interpreter_path(@interpreter), method: :get %>