JQuery est chargé uniquement lors du rafraîchissement de la page dans une application Rails 4

Question

JQuery est chargé uniquement lors du rafraîchissement de la page dans une application Rails 4

Demandé el 26 de Juillet, 2013: Quand la question a-t-elle été
7293 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai créé une application Rails 4 et j'ai ajouté la bibliothèque fancybox pour un effet de popup d'image. Cela fonctionne bien mais seulement lorsque la page est rafraîchie. Si la page n'est pas rafraîchie par l'utilisateur, le jquery ne fonctionne pas du tout. J'ai essayé de le tester avec de petites méthodes jquery également, mais toutes ne fonctionnent qu'après le rafraîchissement de la page. J'utilise également twitter bootstrap.

Mon fichier assets/application.js :

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});

Demandé el 26 de Juillet, 2013 par vishB

7 votes

Est-ce que ça marche au premier chargement de la page et quand vous cliquez sur un autre lien, ça ne marche plus ? Je pense que vous avez un problème avec la bibliothèque turbolinks. Enlevez cette ligne de votre assets/javascript/application.js (ligne 5, //= require turbolinks ) et tenez-moi au courant :)

Commenté el 26 de Juillet, 2013 par Ian

0 votes

Hey, votre astuce a fonctionné, js se charge bien. Mais qu'en est-il des turbolinks ? N'en aurais-je pas besoin plus tard ?

Commenté el 29 de Juillet, 2013 par vishB

2 votes

Je suis surpris que ce sujet ne soit pas plus visible / discuté... Il est tellement courant d'utiliser jQuery et Turbolinks...

Commenté el 26 de Février, 2015 par mmcrae

Answer 1

5 Réponses

Answer 2

180voto

Ian Points 2085

Ok, je pense que je comprends suffisamment ton problème pour te donner une réponse. Le problème de l'utilisation de turbolinks est que la plupart des plugins et des bibliothèques qui se lient à l'événement document prêt cessent de fonctionner, puisque turbolinks empêche le navigateur de recharger la page. Il existe des astuces pour résoudre ces problèmes, mais la façon la plus simple de le faire est d'utiliser jquery.turbolinks .

Pour l'utiliser, il suffit d'ajouter ceci à votre Gemfile :

gem 'jquery-turbolinks'

et ceci à votre assets/javascripts/application.js fichier :

//= require jquery.turbolinks

et vous devriez être prêt à partir.

FYI : Vous n'avez pas vraiment besoin de pour utiliser turbolinks, mais c'est utile et cela rend les requêtes plus rapides en évitant un rafraîchissement complet de la page. Turbolinks récupère le contenu du lien sur lequel vous avez cliqué via AJAX et le rend sur la même page, éliminant ainsi le surcoût du rechargement des actifs (JS et CSS). Essayez de faire fonctionner votre page avec. En utilisant la bibliothèque du paragraphe précédent, je n'ai pas eu de réels problèmes. Plus il y a de CSS et de JS sur votre page, plus l'amélioration obtenue en utilisant les turbolinks est importante.

Répondu el 29 de Juillet, 2013 par Ian (2085 Points )

0 votes

J'avais exactement le même problème, et vous avez trouvé la solution, merci Ian. Je pensais que jquery ne liait pas mes écouteurs d'événements à la page après une redirection link_to, et seulement sur un pageload.

Commenté el 13 de Septembre, 2013 par Alex Neigher

4 votes

Ok ça a marché pour mais il est important de noter que //= require jquery.turbolinks doit être après //= require jquery pour qu'il fonctionne github.com/kossnocorp/jquery.turbolinks

Commenté el 26 de Février, 2015 par mmcrae

0 votes

Cela a fonctionné pour moi, donc merci, mais il faut ajouter que vous devez redémarrer le serveur (pour les débutants).

Commenté el 2 de Mars, 2015 par GhostRider

Afficher 2 autres commentaires

Answer 3

17voto

CodeWalrus Points 134

Ian avait une bonne réponse, et celle-ci est une sorte de complément à celle-ci (l'OS ne me permet pas de commenter à qui que ce soit au moment où j'écris).

De https://github.com/rails/turbolinks/#jqueryturbolinks :

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

Avant, je n'avais pas ajouté require jquery.turbolinks au bon endroit dans la liste, donc c'était un peu difficile. J'ai donc ajouté une nouvelle méthode et j'espère qu'elle fonctionne mieux.

Répondu el 13 de Mars, 2014 par CodeWalrus (134 Points )

2 votes

+1 pour l'info supplémentaire, mes liens ne fonctionnaient toujours pas jusqu'à ce que je lise votre réponse.

Commenté el 11 de Avril, 2014 par pob21

Answer 4

8voto

Karen Points 751

Je n'ai pas réussi à faire fonctionner les choses avant d'avoir suivi les réponses de CodeWalrus et de Ian, mais pour moi, il y avait plus que cela. Comme décrit sur le fichier Readme de jquery.turbolinks l'ordre doit être très précis.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

Aussi, comme décrit ici Si vous avez placé le lien javascript de l'application dans le pied de page pour des raisons d'optimisation de la vitesse, comme je l'ai fait, vous devrez le déplacer dans le dossier de l'application. <head> afin qu'elle se charge avant le contenu de la balise <body> étiquette.

Répondu el 21 de Mai, 2015 par Karen (751 Points )

Answer 5

5voto

Unicornz Points 61

Les turbolinks sont ajoutés dans les rails pour améliorer les performances de la page web. J'ai réussi à faire fonctionner cette solution.

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

Pour plus de détails, voir ce

Répondu el 2 de Décembre, 2015 par Unicornz (61 Points )

Answer 6

1voto

Laurence Bautista Points 11

Supprimez cette ligne de code :

//= require turbolinks

Puis ajoutez celui-ci :

//= require jquery.turbolinks

Répondu el 2 de Février, 2019 par Laurence Bautista (11 Points )

JQuery est chargé uniquement lors du rafraîchissement de la page dans une application Rails 4

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JQuery est chargé uniquement lors du rafraîchissement de la page dans une application Rails 4

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: