Jquery for chosen not working properly on rails 4 app <p>I am using the Mailboxer and Chosen gems. A user can select multiple users from a dropdown menu. The problem is, on the initial load the dropdown appears already opened and allows you to only select one other user. If I reload the page the dropdown appears as it should.</p> <p>When I check it in the chrome inspector I get <a href="http://cl.ly/image/290g3B2o380f" rel="nofollow">TypeError: undefined is not a function</a> error. I've checked S.O, and google and a lot of the advice is to change the order of my application.js file. I have tried this but cannot get this to fire properly on the initial start-up. Looking at my terminal window, every request seems to go through successfully.</p> <p><a href="http://cl.ly/image/2n3r3r2t1S3j" rel="nofollow">Dropdown on initial load, broken</a></p> <p><a href="http://cl.ly/image/2x1X3D0v1w0R" rel="nofollow">Dropdown w/ refresh working properly</a></p> <p>So it DOES work, but why do I have to refresh the page to make it work properly?</p> <p>Application.js:</p> <pre><code> ... // //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require chosen-jquery //= require bootstrap //= require jquery.image-select //= require messages //= require turbolinks </code></pre> <p>application.css.scss:</p> <pre><code>... * *= require_tree . *= require_self */ @import 'bootstrap'; @import 'bootstrap/theme'; @import 'chosen'; ... </code></pre> <p>messages.coffee:</p> <pre><code># Place all the behaviors and hooks related to the matching controller here. # All this logic will automatically be available in application.js. # You can use CoffeeScript in this file: http://coffeescript.org/ jQuery -&gt; $('.chosen-it').chosen() </code></pre> <p>gemfile:</p> <pre><code>source 'https://rubygems.org' ruby '2.1.5' gem 'rails', '4.2.0' gem 'devise' gem 'thin' gem "simple_calendar" gem 'bootstrap-sass' gem 'bootstrap-will_paginate' gem "mailboxer" gem 'will_paginate' gem 'gravatar_image_tag' group :development do gem 'sqlite3' gem 'better_errors' gem 'binding_of_caller' gem 'annotate' end group :production do gem 'pg' gem 'rails_12factor' end gem 'chosen-rails' gem 'sass-rails', '~&gt; 4.0.5' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '&gt;= 1.3.0' # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~&gt; 4.1.0' # See https://github.com/sstephenson/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' gem 'jquery-turbolinks' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~&gt; 2.0' # bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~&gt; 0.4.0', group: :doc #gem 'sass-rails', '4.0.4' # Use ActiveModel has_secure_password # gem 'bcrypt', '~&gt; 3.1.7' # Use unicorn as the app server # gem 'unicorn' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development # Use debugger # gem 'debugger', group: [:development, :test] # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin] </code></pre> <p>Offending file, home.html.erb:</p> <pre><code>&lt;div class="box"&gt; &lt;div class="col-lg-12 text-center"&gt; &lt;div id="carousel-example-generic" class="carousel slide"&gt; &lt;!-- Indicators --&gt; &lt;ol class="carousel-indicators hidden-xs"&gt; &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt; &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt; &lt;/ol&gt; &lt;!-- Wrapper for slides --&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active"&gt; &lt;%= image_tag "slide-1.jpg", :class =&gt; "img-responsive img-full" %&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;%= image_tag "slide-2.jpg", :class =&gt; "img-responsive img-full" %&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;%= image_tag "slide-5.jpg", :class =&gt; "img-responsive img-full" %&gt; &lt;/div&gt; &lt;!-- Controls --&gt; &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt; &lt;span class="icon-prev"&gt;&lt;/span&gt; &lt;/a&gt; &lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt; &lt;span class="icon-next"&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;h2 class="brand-before"&gt; &lt;small&gt;Welcome to&lt;/small&gt; &lt;/h2&gt; &lt;h1 class="brand-name"&gt;Balern Education&lt;/h1&gt; &lt;hr class="tagline-divider"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;hr&gt; &lt;hr&gt; &lt;%= image_tag "intro1.jpg", :class =&gt; "img-responsive img-border img-left" %&gt; &lt;hr class="visible-xs"&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;hr&gt; &lt;h2 class="intro-text text-center"&gt;Balern really &lt;strong&gt;Cares&lt;/strong&gt; &lt;/h2&gt; &lt;hr&gt; &lt;/div&gt; &lt;!-- /.container --&gt; &lt;!-- jQuery --&gt; &lt;script src="assets/jquery.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap Core JavaScript --&gt; &lt;script src="assets/bootstrap.min.js"&gt;&lt;/script&gt; &lt;!-- Script to Activate the Carousel --&gt; &lt;script&gt; $('.carousel').carousel({ interval: 5000 //changes the speed }) &lt;/script&gt; </code></pre>