web-dev-qa-db-fra.com

JQuery est chargé uniquement de l'actualisation de la page dans l'application Rails 4

J'ai créé une application Rails 4 et ajouté une bibliothèque fancybox pour un effet d'image contextuelle. Cela fonctionne bien, mais uniquement lorsque la page est en cours d'actualisation. Si la page n'est pas actualisée par l'utilisateur, alors la requête ne fonctionne pas du tout. J'ai aussi essayé de le tester avec de petites méthodes jquery mais toutes ne fonctionnent qu'après l'actualisation de la page. J'utilise aussi 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();
      }
    });
});
jquerytwitter-bootstrapruby-on-rails-4
78
vishB

D'accord, je pense avoir suffisamment compris votre problème pour pouvoir vous répondre. Le problème avec l'utilisation de turbolinks est que la plupart des plugins et des bibliothèques qui se lient à l'événement document ready cessent de fonctionner, car ils empêchent le navigateur de recharger la page. Il existe des astuces pour résoudre ces problèmes, mais le moyen le plus simple consiste à utiliser jquery.turbolinks .

Pour l'utiliser, ajoutez simplement ceci à votre Gemfile:

gem 'jquery-turbolinks'

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

//= require jquery.turbolinks

et vous devriez être prêt à partir.

FYI: Vous n'avez pas vraiment besoin d'utiliser turbolinks, mais c'est utile et cela accélère les demandes en évitant une actualisation complète de la page. Turbolinks récupère le contenu du lien sur lequel vous avez cliqué via AJAX et l'affiche sur la même page, éliminant ainsi la surcharge liée au rechargement d'actifs (JS et CSS). Essayez de faire fonctionner votre page avec elle. En utilisant la bibliothèque dans le paragraphe précédent, je n’ai eu aucun problème réel. Plus vous avez de CSS et de JS sur votre page, plus l'amélioration obtenue avec turbolinks est importante.

180
Ian

Ian avait une bonne réponse, et celle-ci est un ajout à cela (SO ne me laissera pas commenter à qui que ce soit au moment de la rédaction.)

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 de la liste, donc c'était un peu difficile. Ensuite, j'ai ajouté ceci d'une nouvelle manière et j'espère que cela fonctionnera mieux. 

17
CodeWalrus

Je ne pouvais pas faire fonctionner les choses tant que je ne suivais pas les réponses de CodeWalrus et de Ian, mais pour moi, il y avait plus que cela. Comme décrit sur le fichier Lisez-moi de jquery.turbolinks , la commande doit être très spécifique.

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

En outre, 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, vous devrez le déplacer dans la balise <head> afin qu'il soit chargé avant le contenu du fichier <body>. étiquette.

8
Karen

Les turbolinks sont le problème ici. Les turbolinks sont ajoutés à Rails pour améliorer les performances des pages Web. Cette solution fonctionne.

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

Pour plus de détails se référer ceci

5
Unicornz

Supprimer cette ligne de code:

//= require turbolinks

Ajoutez ensuite celui-ci:

//= require jquery.turbolinks
1
Laurence Bautista