rails和bootstrap：未捕获的ReferenceError：未定义jQuery

I created a simple webapp integrating bootstrap 3 in a rails 3.2.17 application, following this procedure found on *, so without using a gem but manually copying the bootstrap files in the relevant app directories.

我创建了一个简单的webapp，在rails 3.2.17应用程序中集成bootstrap 3，遵循*上的这个过程，所以不使用gem而是手动复制相关app目录中的bootstrap文件。

Even if i have, in my gem file:

即使我有，在我的宝石文件中：

gem 'jquery-rails'

i can still see, inspecting my web page with chrome, the error:

我仍然可以看到，使用chrome检查我的网页，错误：

Uncaught ReferenceError: jQuery is not defined

My page is a "normal" html page in public directory. Maybe it doesn't "inherit" all the assets stuff? The code is like this:

我的页面是公共目录中的“普通”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>

...

I've not yet tried but i guess that javascript based feature won't work.

我还没有尝试，但我想基于JavaScript的功能将无法正常工作。

5 个解决方案

#1

Assuming that after adding gem 'jquery-rails', you have ran bundle install command.

假设在添加gem'jquery-rails'之后，您已经运行了bundle install命令。

Make sure you have following in app/assets/javascripts/application.js

确保您在app / assets / javascripts / application.js中有以下内容

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

EDIT

编辑

You will need to explicitly include jQuery before including /bootstrap.min.js. For example :

在包含/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>

#2

Even if you have set jquery correctly you can still see that issue when you inline javascript code is evoked before jQuery is initialized.

即使你正确设置了jquery，你仍然可以在初始化jQuery之前引发内联javascript代码时看到这个问题。

You can wrap your javascript code in

你可以包装你的javascript代码

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

Or refactor your code to not use inline javascript :)

或重构您的代码不使用内联JavaScript :)

#3

on 'application.js' of rails 5.0.1 the default is

在rails 5.0.1的'application.js'上默认是

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

change it to

改为

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

*load first jquery before bootstrap

*在bootstrap之前加载第一个jquery

#4

Another place to check is the <head> of the application.html.erb file.

另一个要检查的地方是application.html.erb文件的。

Be sure that you're loading in jQuery before the Bootstrap javascript.

确保在Bootstrap javascript之前加载jQuery。

#5

I came across the same error message in the console.

我在控制台中遇到了相同的错误消息。

Just make sure jQuery is above Bootstrap in your 'assets/javascripts/application.js' file

只需确保jQuery在“assets / javascripts / application.js”文件中高于Bootstrap

Solution:

解：

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

#1