select2-rails gem不能在Rails4上工作

Question

我已经尝试了给出select2-rails gem的文档，但是我的浏览器控制台仍然抛出错误。

Uncaught TypeError: $(…)。Select2不是函数

我使用的是rails 4.0.1 &select2-rails 3.5.9.3

我的<<p> strong> 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"}) %>

我在这里做错了什么?

Answer 1

问题肯定在application.js:根据他们的演示应用程序，需要JS插件的顺序如下:

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

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

//= 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 .

Answer 2

我从未遇到过这个问题，而使用rails 4.1.5 &select2-rails 3.5.9.3。然而，在将rails升级到4.2.4之后，我得到了与这个问题中描述的完全相同的错误:

Uncaught TypeError: $(…)。Select2不是函数

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

来解决错误。

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

Answer 3

在使用CoffeeScript和turbollinks的rails 5上，我必须使用以下行:
$(document).on "turbolinks:load", ->

Answer 4

我有同样的问题，改变JS插件的顺序没有帮助。

我最终移除了涡轮链接，它现在工作。可能不是最好的解决方案，但这是我经过几个小时的搜索后得到的最好的解决方案。

因此，基本上我从application。js文件中删除了这一行:

//= require turbolinks