带有select2和bootstrap: undefined的Collection_select不是一个函数

Question

在Rails 4.1应用程序中，我有一个从散列加载的集合选择。我想使用select2 bootstrap样式，但它似乎不工作。

我已经包含了select2-rails gem，并按照说明更新了application.js和application.css。

gem 'select2-rails'
//= require select2
*= require select2
*= require select2-bootstrap

collection_select是从模型上的常量加载的。我不认为这与这个问题特别相关，但我把它加在这里，以防对某人有所帮助。

FLASHCARD_TYPE = {"verb" => "Verb Conjugation",
                "name" => "Word",
                "number" => "Number",
                "quiz" => "Quiz"}

Rails视图

<div class="form-group">
  <%= f.label :card_type, :class => "col-sm-2 control-label" %>
  <div class="col-sm-2">
    <%= f.collection_select(:card_type, Flashcard::FLASHCARD_TYPE, :first, :last) %>
  </div>
</div>

应用程序/资产/javascript/application.js

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

呈现的html显示了select2 javascript，选择显示为:

 <div class="form-group">
    <label class="col-sm-2 control-label" for="flashcard_card_type">Card type</label>
    <div class="col-sm-2">
      <select id="flashcard_card_type" name="flashcard[card_type]">
         <option value="verb">Verb Conjugation</option>
         <option value="name">Word</option>
         <option value="number">Number</option>
         <option value="quiz">Quiz</option></select>
    </div>
  </div>

这怎么能正常工作?事实上，我也希望这个选项有一个站点范围内的默认值，所有选择通过类，然后覆盖单个id样式的能力。

我认为这将工作作为网站范围内的所有选择，但它也没有什么。

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

编辑

按照@San的建议，我检查了Javascript控制台，得到

Uncaught TypeError: undefined is not a function 

这是在

上失败的代码

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

编辑2 完整的application.js文件

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-markdown
//= require select2
//= require_tree .
$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

编辑3 jQuery正在查找元素OK

$(document).ready(function(){
    debugger;
    console.log($("#flashcard_card_type"))
  $("#flashcard_card_type").select2();
});

日志

 [select#flashcard_card_type, context: document, selector: "#flashcard_card_type",  jquery: "1.11.1", constructor: function, toArray: function…]
 0: select#flashcard_card_type
 context: document
 length: 1
 selector: "#flashcard_card_type"
 __proto__: Object[0]

EDIT - What I have try

• 删除turbolinks
• 添加javascript到页面
• 删除缓存，重新启动rails

What I have found

jQuery可以找到标签
• select2库是通过js调试器中的network选项卡加载的。

任何想法?

Answer 1

不知道。

将gem添加到Gemfile后是否运行bundle install ?

如果您这样做了，最后要检查的是确保select2 JavaScript文件在您的块使用它之前正在加载。通过在页面上查看源代码来验证这一点，并确保select2.js在application.js文件之前列出(假设您处于开发模式)。