select2-rails gem 不适用于 Rails4答案

【问题标题】：select2-rails gem is not working on Rails4select2-rails gem 不适用于 Rails4
【发布时间】：2015-05-30 11:47:20
【问题描述】：

我已尝试为 the select2-rails gem 提供文档，但我的浏览器控制台仍然抛出错误。

未捕获的类型错误：$(...).select2 不是函数

我正在使用rails 4.0.1&select2-rails 3.5.9.3

我的application.js

//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .

$(document).ready(function() {
  $("select#team_select").select2();
});

application.css

*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome

_form.html.erb

<%= f.select(:team_id, @teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>

我在这里做错了什么？任何帮助表示赞赏。

【问题讨论】：

你检查过 select2.js 是否真的加载了吗？
把 tour '//require select2' 放在所有 JQUERY 插件之后？并删除 jquery => $('#team_select').select2(); 选择器中的'select'

标签： javascript ruby-on-rails select2-rails

【解决方案1】：

问题肯定出在application.js：根据他们Demo App，需要JS插件的顺序如下：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .

在你的情况下，你必须加载turbolinks 之前 select2，导致：

//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .

【讨论】：

【解决方案2】：

我在使用 rails 4.1.5 和 select2-rails 3.5.9.3 时从未遇到过这个问题。但是，在将 rails 升级到 4.2.4 后，我得到了与此问题中描述的完全相同的错误：

未捕获的类型错误：$(...).select2 不是函数

我能够通过从我的 Gemfile 中删除“select2-rails”gem 并将其替换为：

source 'https://rails-assets.org' do
  gem 'rails-assets-select2', '~> 4.0.0'
end

【讨论】：

【解决方案3】：

在使用 CoffeeScript 和 turbolinks 的 rails 5 上，我必须使用以下线路：
$(document).on "turbolinks:load", -> 在所有内容之前，以便在加载带有 select 标记的所需页面时执行代码。

【讨论】：

【解决方案4】：

我遇到了同样的问题，更改 JS 插件的顺序没有帮助。

我最终删除了 turbolinks，它现在可以工作了。可能不是最好的解决方案，但这是我经过几个小时搜索后获得的最好的结果。

所以，基本上我从 application.js 文件中删除了该行：

//= require turbolinks

【讨论】：

我们可以修改link_to，而不是删除//= require turbolinks，例如：<%= link_to('Giraffe', @giraffe, data: { no_turbolink: true }) %>Reference