twitter bootstrap drop down soudainement ne fonctionne pas
je me demandais si quelqu'un pouvait m'aider. mon menu déroulant bootstrap a soudainement cessé de fonctionner. Je ne sais pas pourquoi. ça fonctionnait avant. Je n'ai pas touché mes vues mes vues de mises en page donc je pense que le problème n'est pas là. Je suis sûr que cela a à voir avec mon javascript mais je ne sais pas d'où ça vient.
mon fichier bijou est ...
gem 'Rails', '3.2.3'
gem 'bootstrap-sass', '2.0.1'
gem 'bcrypt-Ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'delayed_job_active_record'
gem 'daemons'
gem 'make_voteable'
gem 'admin_data'
gem 'indextank'
et mon application.js est ...
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-dropdown
//= require bootstrap
//= require_tree .
je suppose que cela a peut-être quelque chose à voir avec mes fichiers de configuration?
dû bouger
//= require jquery
au dessous de
//= require bootstrap
dans
application.js
si la précompilation ne fonctionne pas, essayez également de supprimer les actifs précompilés.
rake assets:clean
J'ai constaté que le menu déroulant js chargé deux fois dans le pipeline d'actifs semble ouvrir et fermer le menu déroulant instantanément, mais que cela fonctionnerait parfaitement dans Heroku/Production.
J'ai eu le même problème et j'ai trouvé 2 façons de le résoudre.
Tout d’abord, laissez-moi vous raconter ma configuration: j’ai suivi les instructions du site de démarrage, puis j’ai téléchargé bootstrap-dropdown.js. Je le mets dans assets/javascripts. Mon fichier application.js ressemble à ceci:
//= require jquery
//= require jquery_ujs
//= require Twitter/bootstrap
//= require_tree .
Les menus déroulants n'ont pas fonctionné.
J'ai remarqué dans la source de la page qu'une balise de script pour bootstrap-dropdown.js est apparue deux fois:
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/Twitter/bootstrap/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/Twitter/bootstrap/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/Twitter/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
J'ai donc supprimé la ligne //= require_tree . de application.js, redémarré le serveur et la liste déroulante a fonctionné!
Ensuite, j'ai remis la ligne //= require_tree . et à la place, j'ai supprimé le fichier assets/bootstrap-dropdown.js, et encore une fois, cela a fonctionné!
Je ne comprends pas cela, mais réordonner // = nécessite jquery et // = nécessite un démarrage a semblé résoudre le problème deux fois pour moi. Le premier bootstrap en mouvement au-dessus de jQuery comme suggéré par Sasha le corrige. Ensuite, j'ai effectué davantage de travaux et je me suis préparé à déployer à l'aide de jruby on Rails 3.2.3. Les actifs précompilés, les gazouillis et les listes déroulantes ont cessé de fonctionner, tant dans le développement que dans la production. Supprimez public/assets, ainsi que certains fichiers .class et des fichiers dans tmp. Aucun effet. Enfin, j’ai reporté la commande dans application.js à ce qu’elle était avant le dernier épisode d’échec, c’est-à-dire jquery avant bootstrap, et les menus déroulants fonctionnent à nouveau.
Une modification de application.js pourrait-elle déclencher la reconstruction d'un cache ou d'un processus en arrière-plan qui est à l'origine du problème? La prochaine fois que cela se produira, j'essaierai de modifier trivialement application.js et de voir si cela ne fait rien.
J'expérimentais cela sur ma machine de développement mais mon serveur de production fonctionnait bien. J'ai remarqué que bien que réorganiser le js nécessite dans application.js corrige le problème de développement (les menus déroulants fonctionnaient à nouveau), soyez prudent, cela tue mes programmes de production. Je devais revenir en arrière et les remettre comme ils étaient pour que la production fonctionne à nouveau. Pour le moment, je les modifie temporairement en dev quand j'en ai besoin.
La précompilation des ressources a encore résolu le problème pour moi
J'ai eu ce problème aussi ... et c'était lié aux turbolinks de Rails. Lors du chargement initial de la page, les menus déroulants ne fonctionneraient pas, mais après une actualisation, ils le seraient. De plus, avec les liens turbo, certains éléments Dom risquent de ne pas être chargés/rechargés à chaque fois. Ainsi, ma liste déroulante a cessé de fonctionner régulièrement (entre autres choses). Pour résoudre ce problème, Rails 4 ajoute la gem jquery.turbolinks https://github.com/kossnocorp/jquery.turbolinks . Une chose que j'ai trouvée avec cette gemme (et plus tard dans un blog), c'est que la balise javascript doit être dans la tête. Le README ne mentionne pas cela ... mais
Assurez-vous également que vous n'avez pas //require bootstrap-sprockets dans votre application.js. J'ai commenté cela et cela a fonctionné pour moi.
J'ai trouvé une alternative! toutes ces solutions ne fonctionnaient pas pour moi. Au lieu d'avoir le menu déroulant déclenché au clic, je l'ai fait déclencher en survol à la place. mettre en bas de page dans les balises de script. code from: http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-Rails/
$(document).ready(function(){
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
n})
La précompilation des ressources ne fonctionnait pas
En mettant le bon ordre et en supprimant tout dans le dossier public/assets, cela a fonctionné en développement.
See Rails 3.1 Assets - Strange Serving in Development
il y a un bogue où la version compressée est incluse en mode débogage dans application.js
Ticket # 5145 a récemment été fermé pour cette raison. Le correctif a été annulé, mais une solution spécifique à l'application a été fournie à la fin et fonctionne pour moi. Veillez également à vider le cache de votre navigateur.
J'ai eu cette erreur et il s'avère que mon CSS empêchait le menu déroulant de fonctionner.
Plus précisément j'avais "débordement: caché;" dans mon en-tête nav CSS. Enlever cela a résolu le problème.
Déplacer //= require jquery ci-dessous //= require bootstrap et mettre à niveau gem 'bootstrap-sass', vers 2.3.0.1 , a résolu mon problème.
Je veux ajouter cette solution que j'ai mentionnée ci-dessus ne fonctionne que sur Localhost mais pas sur Heroku . La solution pour les deux dans mon cas était:
//= require jquery//= require jquery_ujs//= require bootstrap//= require_tree .
gem bootstrap-sass, 2.3.0.1
et <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> doit être à l'intérieur " _header.html.erb " et supprimer de " application.html.erb ".