web-dev-qa-db-fra.com

rails et bootstrap: Uncaught ReferenceError: jQuery n'est pas défini

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. 

jqueryruby-on-railstwitter-bootstrap
22
AgostinoX

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>
27
Kirti Thorat

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

11
mpalencia

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 :)

11
Serge Seletskyy

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.

1
ConorB

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
0
kai_onthereal