4

在 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"}

导轨视图

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

应用程序/资产/javascripts/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]

编辑-我尝试过的

  • 删除了涡轮链接
  • 将javascript添加到页面
  • 删除缓存，重启rails

我发现了什么

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

有任何想法吗？

4

1 回答 1

2

就是想。bundle install添加gem到后你运行了Gemfile吗？

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

于 2014-07-21T14:24:06.417 回答