collection_select与select2和bootstrap：undefined不是函数

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

我已经包括选择2护栏宝石，并更新的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(); 
});

EDIT 2的代码 完整的应用程序。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的网页
删除缓存，重新启动轨道

我发现

的jQuery可以找到标签
将选择2库通过js调试器中的网络选项卡加载

任何想法？

来源

2014-07-20 ardochhigh

请检查控制台是否有任何JavaScript错误。如果有问题，请将它们包含在问题中。 – San

是的你是对的。有错误：我已将它们添加到OP。 – ardochhigh

可能是一个较早的JavaScript在页面上的问题缺少结束分号http://stackoverflow.com/questions/10429838/uncaught-typeerror-undefined-is-not-a-function-on-loading-jquery-min- js –

只是想知道。在将gem添加到Gemfile之后，您运行了bundle install吗？

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

来源

2014-07-21 14:24:06 San

非常感谢你。我会在今晚查看页面上js的顺序。感谢您对此问题的持续关注。 PS：是的捆绑安装已经运行了很多次。 – ardochhigh

collection_select与select2和bootstrap：undefined不是函数

回答

相关问题