collection_select with select2 and bootstrap: undefined is not a function

Question

In a Rails 4.1 app, I have a collection select that is loaded from a hash. I would like to use the select2 boostrap styling, but it doesn't seem to be working.

I have included the select2-rails gem, and updated application.js and application.css as per the instructions.

gem 'select2-rails'

//= require select2

*= require select2
*= require select2-bootstrap

The collection_select is loaded from a constant on the model. I don't think this is especially relevant to the issue, but added it here in case it helps someone.

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

Rails view

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

app/assets/javascripts/application.js

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

The rendered html shows the select2 javascript, and the select shows as:

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

How can this to work properly? In fact I would also like the option to have a site-wide default for all selects via class, then the ability to override styling by individual id.

I thought this would work as site-wide for all selects, but it also does nothing.

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

EDIT

As recommended by @San I checked the Javascript console, and got

Uncaught TypeError: undefined is not a function

This the code it failed on

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

EDIT 2 Full application.js file

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-markdown
//= require select2
//= require_tree .

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

EDIT 3 jQuery is finding the element OK

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

log

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

removed turbolinks
added the javascript to the page
deleted cache, restarted rails

What I have found

jQuery can find the tag
The select2 library is loaded via the network tab in the js debugger

Any ideas?

Please check if there are any JavaScript errors in the console. Include them to the question, if there are. — San, Jul 20 '14 at 10:26
Yes you are right. There are errors: I have added them to OP. — port5432, Jul 20 '14 at 10:28
might be a problem with some earlier javascript on the page missing an ending semicolon http://stackoverflow.com/questions/10429838/uncaught-typeerror-undefined-is-not-a-function-on-loading-jquery-min-js — Ian Kenney, Jul 20 '14 at 11:29
@vee No it is not on the page: it is in the global application.js file — port5432, Jul 20 '14 at 12:04
@vee you are correct. I have corrected the OP. My apologies for the error — port5432, Jul 20 '14 at 12:11
Can you try adding `require_self` after `require_tree .` in your `app/assets/javascripts/application.js`? I haven't used `select2` in rails or elsewhere but it looks neat: http://jsfiddle.net/RMYJJ/ — vee, Jul 20 '14 at 12:41
@vee thanks for your help. No it didn't work also. Added some notes to the OP — port5432, Jul 20 '14 at 12:47
I'm sorry, I think that's as far as I can get to with the information. That error would occur if `select2()` is not loaded but you've already verified that. One last verification would be to open the `select2` file from the developer tools and to verify that it looks correct. By the way, I deleted my previous comments as they were for verification purposes only. — vee, Jul 20 '14 at 12:56
@vee Thank you very much for all if your help, I really appreciate it. I suspect there is some type of conflict. I will take a break and look at it again later. Regards — port5432, Jul 20 '14 at 12:58
@ardochhigh did you solve this situation? If so, could you add it as answer? I'm in a similar situation. Thank you — Robert, Apr 10 '18 at 11:51

score 2 · Answer 1 · answered Jul 21 '14 at 14:24

2

Just wondering. Did you run bundle install after adding the gem to the Gemfile?

If you did, the last thing to check is to make sure select2 JavaScript file is loading before your block to use it. Verify that by doing view source on the page and make sure select2.js is listed before application.js file (assuming you are in dev mode).

answered Jul 21 '14 at 14:24

San

1,954
1
14
18

thank you very much. I will check the order of js on the page this evening. Thanks for your continued consideration on this issue. PS: yes bundle install has been run numerous times. – port5432 Jul 21 '14 at 14:28

collection_select with select2 and bootstrap: undefined is not a function

1 Answers1