J'ai créé une simple application Web intégrant Bootstrap 3 dans une application Rails 3.2.17, en suivant la procédure this présente sur stackoverflow, donc sans utiliser de gem mais en copiant manuellement les fichiers de démarrage dans les répertoires de l'application concernée.
Même si j'ai, dans mon fichier bijou:
gem 'jquery-Rails'
je peux encore voir, en inspectant ma page Web avec chrome, l'erreur:
Uncaught ReferenceError: jQuery is not defined
Ma page est une page HTML "normale" dans un répertoire public. Peut-être qu’il n’hérite pas de tous les actifs? Le code est comme ça:
<! DOCTYPE html> <Html> <Head> <title> Test Bootsrap 01 </ title> <link rel = "stylesheet" href = "/ css/bootstrap.css"> <script src = "/ js/bootstrap.min.js" type = "text/javascript"> </ script> </ head> ...
Je n'ai pas encore essayé, mais je suppose que cette fonctionnalité basée sur JavaScript ne fonctionnera pas.
En supposant qu'après avoir ajouté gem 'jquery-Rails'
, vous avez exécuté la commande bundle install
.
Assurez-vous que vous avez suivi dans app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min // Add it after jquery and jquery_ujs
MODIFIER
Vous devrez inclure explicitement jQuery avant d’inclure /bootstrap.min.js
. Par exemple :
<!DOCTYPE html>
<html>
<head>
<title>Bootsrap Test 01</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src="/assets/jquery.js" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
sur 'application.js' de Rails 5.0.1, la valeur par défaut est
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
changez le en
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
* charge le premier jquery avant le bootstrap
Même si vous avez défini correctement jquery, vous pouvez toujours voir ce problème lorsque votre code javascript intégré est évoqué avant l'initialisation de jQuery.
Vous pouvez envelopper votre code javascript dans
document.addEventListener("DOMContentLoaded", function(event) {
//do work with $
});
Ou refactoriser votre code pour ne pas utiliser le javascript en ligne :)
Un autre endroit à vérifier est le <head>
du fichier application.html.erb
.
Assurez-vous que vous chargez jQuery avant le code javascript de Bootstrap.
Je suis tombé sur le même message d'erreur dans la console.
Assurez-vous simplement que jQuery est au dessus de Bootstrap dans votre fichier 'assets/javascripts/application.js'
Solution:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap