Comment utiliser $(document).ready() avec les liens Turbo dans Rails 4 et 5 ?

Utiliser $(document).ready() avec des Turbo-Links dans Rails 4

Dans Rails 4, il est courant d'organiser les fichiers JavaScript en entités distinctes et de les compiler en utilisant le pipeline d’actifs. Cependant, l'utilisation de l'événement « ready » de jQuery peut poser des problèmes lorsque les turbo-liens sont activés. Comme le turbo-linking évite les rechargements de pages complètes, les clics ultérieurs sur les pages empêchent l'exécution du code dans la fonction "ready".

Solution :

Pour assurer le bon fonctionnement de jQuery événements avec des liens turbo, utilisez les éléments suivants approche :

CoffeeScript :

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

Ici, la ligne supplémentaire écoute l'événement 'page:load', déclenché par liens turbo.

JavaScript :

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Alternative pour Rails 5 (Turbolinks 5) :

Rails 5 introduit un nouvel événement « turbolinks:load » qui est déclenché lors des chargements de page initiaux et ultérieurs. Cela nous permet de simplifier la solution :

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

  ...your javascript goes here...

});

Cette approche garantit que les événements jQuery se déclenchent comme prévu lorsque les turbo-liens sont actifs, permettant un fonctionnement fluide des fonctionnalités JavaScript sur votre application Rails 4.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!