select2-rails gem无法在Rails4上运行

时间:2015-05-30 11:47:20

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

我已经尝试了the select2-rails gem的文档,但我的浏览器控制台仍然会出错。

  

未捕获的TypeError:$(...)。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"}) %>

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

4 个答案:

答案 0 :(得分:8)

问题肯定在 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 .

答案 1 :(得分:1)

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

  

未捕获的TypeError:$(...)。select2不是函数

我能够通过从我的Gemfile中删除“select2-rails”gem并将其替换为以下内容来解决错误:

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

我最终删除了turbolinks并且它现在正在工作。可能不是最好的解决方案,但这是我在搜索几个小时后所取得的最好成绩。

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

//= require turbolinks