Ruby on Rails 安装 JQuery

Posted 2023-03-07

【中文标题】Ruby on Rails 安装 JQuery

【英文标题】：Ruby on Rails Install JQuery

【发布时间】：2018-06-25 00:36:42

【问题描述】：

我创建了一个新项目，我只是按照教程一步一步在我的项目中安装jquery，但它不起作用。

我将这两行添加到我的视图中。

---

项目\Gemfile

来源“https://rubygems.org” git_source(:github) 做 |repo_name| repo_name = "#repo_name/#repo_name" 除非 repo_name.include?("/") “https://github.com/#repo_name.git” 结尾 # 捆绑边缘 Rails：gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.4' # 使用 sqlite3 作为 Active Record 的数据库 宝石'sqlite3' # 使用 Puma 作为应用服务器 宝石'美洲狮'，'〜> 3.7' # 使用 SCSS 作为样式表 gem 'sass-rails', '~> 5.0' # 使用 Uglifier 作为 javascript 资源的压缩器 gem 'uglifier', '>= 1.3.0' # 有关更多支持的运行时，请参阅 https://github.com/rails/execjs#readme # gem 'therubyracer', 平台: :ruby # 将 CoffeeScript 用于 .coffee 资产和视图 宝石'咖啡轨'，'〜> 4.2' # Turbolinks 使您的 Web 应用程序导航更快。阅读更多：https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # 轻松构建 JSON API。阅读更多：https://github.com/rails/jbuilder 宝石'jbuilder'，'〜> 2.5' # 使用 Redis 适配器在生产环境中运行 Action Cable # gem 'redis', '~> 3.0' # 使用 ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # 使用 Capistrano 进行部署 # gem 'capistrano-rails'，组：：开发 组：开发，：测试做 # 在代码中的任意位置调用 'byebug' 以停止执行并获取调试器控制台 gem 'byebug'，平台：[:mri, :mingw, :x64_mingw] # 添加对 Capybara 系统测试和 selenium 驱动程序的支持 宝石'水豚'，'〜> 2.13' 宝石“硒网络驱动程序” 结尾 组：开发做 # 在异常页面或代码中的任何地方访问 IRB 控制台。 宝石'网络控制台'，'> = 3.3.0' 结尾 # Windows 不包含 zoneinfo 文件，因此捆绑 tzinfo-data gem gem 'tzinfo-data'，平台：[：mingw，：mswin，：x64_mingw，：jruby] 宝石'jquery-rails' 宝石'mysql2'

---

项目\app\assets\javascripts\application.js

// 这是一个清单文件，将被编译成 application.js，其中将包含所有文件 // 下面列出。 // // 此目录中的任何 JavaScript/Coffee 文件、lib/assets/javascripts 或任何插件的 // vendor/assets/javascripts 目录可以在这里使用相对路径引用。 // // 这里不建议直接加代码，但是如果加了，会出现在底部 // 编译文件。此文件中的 JavaScript 代码应添加在最后一个 require_* 语句之后。 // // 阅读 Sprockets README (https://github.com/rails/sprockets#sprockets-directives) 了解详情 // 关于支持的指令。 // //= 需要 rails-ujs //= 需要涡轮链接 //= 需要 jquery //= 需要 jquery_ujs //= 要求树。

【问题讨论】：

我认为您没有按正确的顺序放置 jquery 要求文件。让我们试试给定的解决方案。

【参考方案1】：

在包含样式表和 javascript 时执行此操作

<%= stylesheet_link_tag ....
<%= javascript_include_tag ....

你忘记输出了。没错 ->

你只是写了

【讨论】：

您是否查看过 html 代码实际上加载了哪些 css 和 js？或者在您的检查员网络选项卡中查看正在加载哪些文件。 @Gabbar 和我写的应该可以工作。

【参考方案2】：

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

在您的布局中：-

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

在上述更改后重新启动您的服务器。

【讨论】：

它现在可以工作了，但我有另一个错误。当 //= 需要 turbolinks 时，它会在 cmd 上显示 [对象不支持此属性或方法]，但在没有 //

的情况下也可以工作

@Kase 只需在 application.js 中更改 // require turbolinks 来评论 turbolinks，因为我编辑了答案并重新启动您的服务器。希望它对你有所帮助。随时接受/支持答案。

我评论了require_tree，它现在可以正常工作了。