web-dev-qa-db-ja.com

rails and bootstrap：Uncaught ReferenceError：jQuery is not defined

私はbootstrap 3をRails 3.2.17アプリケーションに統合し、stackoverflowで見つかった this プロシージャを見つけたので、 gemを使用しますが、関連するアプリディレクトリ内のbootstrapファイルを手動でコピーします。

私が持っている場合でも、私のgemファイルに：

gem 'jquery-Rails'

私はまだクロムで私のウェブページを調べて、エラーを見ることができます：

Uncaught ReferenceError: jQuery is not defined

私のページは、パブリックディレクトリにある「通常の」htmlページです。たぶん、すべてのアセットを「継承」しないのでしょうか？コードは次のとおりです。

 
 <！DOCTYPE html> 
 <html> 
 <head> 
 <title> Bootsrap Test 01 </ title> 
 <link rel = "stylesheet" href = "/ css/bootstrap.css"> 
 <script src = "/ js/bootstrap.min.js" type = "text/javascript"> </ script> 
 </ head> 
 
 ...

まだ試していませんが、javascriptベースの機能は動作しないと思います。

jqueryruby-on-railstwitter-bootstrap
23
AgostinoX

gem 'jquery-Rails'を追加した後、bundle installコマンドを実行したと仮定します。

app/assets/javascripts/application.jsでフォローしていることを確認してください

//= require jquery
//= require jquery_ujs
//= require bootstrap.min   // Add it after jquery and jquery_ujs

[〜＃〜] edit [〜＃〜]

/bootstrap.min.jsを含める前に、jQueryを明示的に含める必要があります。例えば ​​：

<!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>
29
Kirti Thorat

Jqueryを正しく設定した場合でも、jQueryが初期化される前にjavascriptコードをインライン化すると、その問題を確認できます。

JavaScriptコードをラップすることができます

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work with $
});

または、インラインjavascriptを使用しないようにコードをリファクタリングします:)

13
Serge Seletskyy

Rails 5.0.1の 'application.js'のデフォルトは

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

に変更する

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

*ブートストラップの前に最初のjqueryをロードします

11
mpalencia

チェックする別の場所は<head>のapplication.html.erbファイル。

Bootstrap javascript。

1
ConorB

コンソールで同じエラーメッセージが表示されました。

JQueryが「assets/javascripts/application.js」ファイルのBootstrapの上にあることを確認してください

解決：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
0
kai_onthereal