web-dev-qa-db-fra.com

Rails 5: comment utiliser $ (document) .ready () avec des liens turbo

Turbolinks empêche les événements normaux $(document).ready() de se déclencher lors de toutes les visites de page autres que le chargement initial, comme indiqué précédemment ici et ici . Aucune des solutions dans les réponses liées ne fonctionne avec Rails 5, cependant. Comment puis-je exécuter du code sur chaque visite de page comme dans les versions précédentes?

javascriptjqueryruby-on-railsturbolinksruby-on-rails-5
75
AndrewH

Plutôt que d'écouter l'événement ready, vous devez vous connecter à un événement déclenché par Turbolinks à chaque visite de page.

Malheureusement, Turbolinks 5 (la version qui apparaît dans Rails 5) a été réécrit et n'utilise pas les mêmes noms d'événement que dans les versions précédentes de Turbolinks, ce qui a entraîné l'échec des réponses mentionnées. Ce qui fonctionne maintenant, c’est d’écouter l’événement turbolinks: load comme suit:

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

JS natif:

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

C'est ma solution, remplacer jQuery.fn.ready, puis $(document).ready fonctionne sans changement:

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

Dans Rails 5, la solution la plus simple consiste à utiliser:

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

Au lieu de $(document).ready. Fonctionne comme un charme.

7
Milad.Nozari

Voici une solution qui fonctionne pour moi, de ici :

  1. installer gem 'jquery-turbolinks'

  2. ajoutez ce fichier .coffee à votre application: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. nommez-le turbolinks-compatibility.coffee

  4. à application.js

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

Pendant que nous attendions la solution à ce petit bijou vraiment cool, j’ai pu aller de l’avant en modifiant ce qui suit:

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

à:

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

Je ne sais pas encore ce que cela ne résout pas, mais cela semblait bien fonctionner lors de l'inspection initiale.

0
Jason Ihaia

(Pour le café)

J'utilise: $(document).on 'turbolinks:load', ->

Au lieu de: $(document).on('turbolinks:load', function() {...})

0
fcabanasm