web-dev-qa-db-fra.com

Rails, javascript ne se charge pas après avoir cliqué sur l'aide de link_to

J'ai du mal à charger mon javascript lorsque j'utilise un assistant link_to dans Rails. Lorsque j'entre manuellement l'URL avec 'localhost: 3000/products/new' ou que je recharge la page, le javascript se charge, mais lorsque je passe par un lien comme écrit ci-dessous, jQuery $(document).ready ne se charge pas sur la nouvelle page.

Link_to, javascript ne se charge pas lorsque je clique sur ce lien:

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

fichier products.js

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

Toute aide serait très appréciée. Merci d'avance!

javascriptjqueryruby-on-rails
74
StickMaNX

Utilisez-vous Rails 4? (Découvrez en faisant Rails -v Dans votre console)

Ce problème est probablement dû au nouveau gem Turbolinks . Il fait que votre application se comporte comme une application JavaScript d'une seule page. Il présente quelques avantages ( c'est plus rapide ), mais il casse malheureusement certains événements existants comme $(document).ready() car la page n'est jamais rechargée. Cela expliquerait pourquoi le JavaScript fonctionne lorsque vous chargez directement l'URL, mais pas lorsque vous y accédez via un link_to.

Voici un RailsCast sur Turbolinks.

Il existe quelques solutions. Vous pouvez utiliser jquery.turbolinks comme correctif de dépôt, ou vous pouvez changer votre instruction $(document).ready() pour utiliser à la place l'événement Turbolinks 'page:change':

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

Alternativement, vous pouvez faire quelque chose comme ceci pour la compatibilité avec les chargements de page réguliers ainsi que Turbolinks:

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

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

Si vous utilisez Ruby on Rails> 5 (vous pouvez vérifier en exécutant Rails -v Dans la console)) utilisez 'turbolinks:load' au lieu de 'page:change'

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

J'ai le même problème mais jquery.turbolinks n'aide pas. J'ai remarqué que je dois remplacer la méthode GET.

Voici mon échantillon:

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

Si vous êtes sur Rails 5 au lieu de 'page:change' Tu devrais utiliser 'turbolinks:load' comme ça:

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

Source: https://stackoverflow.com/a/3611079

23
user000001

Vous pouvez également envelopper votre lien avec un div qui spécifie data-no-turbolink.

Exemple:

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

Source: https://github.com/Rails/turbolinks

5
equn

FWIW, à partir de Turbolinks docs , l'événement le plus approprié à capturer au lieu de $(document).ready est page:change.

page:load a une mise en garde: il ne se déclenche pas lors des rechargements de cache ...

Un nouvel élément body a été chargé dans le DOM. Ne se déclenche pas lors d'un remplacement partiel ou lorsqu'une page est restaurée à partir du cache, afin de ne pas se déclencher deux fois sur le même corps.

Et puisque Turbolinks ne fait que changer de vue, page:change est plus approprié.

3
pyepye

Assurez-vous que vous n'avez pas de ligne en ligne <script> Mots clés. (Les balises de script en ligne sont mauvaises avec les turboliens).

3
poorman