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不是函數

回答

相關問題