javascript - callbacks - Rails 5: como usar $(document).ready() con turbo-links

turbolinks callbacks

Question

Turbolinks evita que los eventos normales $(document).ready() se activen en todas las visitas a la página además de la carga inicial, como se discutió here y here . Sin embargo, ninguna de las soluciones en las respuestas vinculadas funciona con Rails 5. ¿Cómo puedo ejecutar el código en cada visita a la página como en versiones anteriores?

Answer 1

(Para coffeescript)

Yo uso: $(document).on ''turbolinks:load'', ->

En lugar de: $(document).on(''turbolinks:load'', function() {...})

Answer 2

Aquí hay una solución que funciona para mí, desde here :

1. instalar gem ''jquery-turbolinks''

2. agregue este archivo .coffee a su aplicación: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. nómbralo turbolinks-compatibility.coffee

4. en application.js

   //= require jquery
   //= require jquery_ujs
   //= require jquery.turbolinks
   //= require turbolinks
   //= require turbolinks-compatibility

Answer 3

En los rieles 5, la solución más fácil es usar:

jQuery.fn.ready = (fn)->
$(this).on ''turbolinks:load'', fn

En lugar de $(document).ready . Funciona de maravilla.

Answer 4

En lugar de escuchar el evento ready , debe conectarse a un evento activado por Turbolinks para cada visita a la página.

Desafortunadamente, Turbolinks 5 (que es la versión que aparece en Rails 5) se ha reescrito y no utiliza los mismos nombres de eventos que en versiones anteriores de Turbolinks, lo que hace que las respuestas mencionadas fallen. Lo que funciona ahora es escuchar los turbolinks:load evento así:

$( document ).on(''turbolinks:load'', function() {
console.log("It works on each visit!")
})

Answer 5

Esta es mi solución, anular jQuery.fn.ready , luego $(document).ready funciona sin ningún cambio:

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

Answer 6

JS nativo:

document.addEventListener("turbolinks:load", function() {
console.log(''It works on each visit!'');
});

Answer 7

Mientras esperamos la solución a esta gema realmente genial, pude avanzar modificando lo siguiente;

 addCallback: (callback) ->
if $.turbo.isReady
callback($)
$document.on ''turbo:ready'', -> callback($)

a:

 addCallback: (callback) ->
if $.turbo.isReady
callback($)
$document.on ''turbolinks:load'', -> callback($)

Todavía no sé lo que esto no resuelve, pero pareció funcionar bien en la inspección inicial.

Answer 8

Usa los jquery-turbolinks .

Hace que $(document).ready() funcione con Turbolinks sin cambiar el código existente.

Alternativamente, puede cambiar $(document).ready() a uno de:

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

dependiendo de cuál sea más apropiado en su situación.