Question

在Rails 4.1应用程序中，我有一个从哈希加载的集合选择。我想使用select2 boostrap样式，但它似乎没有用。

我已经包含了 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，而select显示为：

 <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]

编辑 - 我尝试了什么

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

我找到了什么

jQuery可以找到标签
select2库通过js debugger

有什么想法吗？

Answer 1

只是想知道。将bundle install添加到gem？

后，您是否已将Gemfile投放？

如果你这样做，最后要检查的是确保在你的块使用之前加载select2 JavaScript文件。验证是否通过在页面上执行查看源并确保在select2.js文件之前列出application.js（假设您处于开发模式）。

使用select2和bootstrap的collection_select：undefined不是一个函数

1 个答案: