Rails 4 - JavaScript stopped working, getting: undefined is not a function

Question

I have a Rails app in which I use the gem chosen-rails (or chosen-sass-bootstrap-rails): In my gemfile I have this:

gem 'chosen-sass-bootstrap-rails'

It previously used to work, but now I constantly get this error - and I'm not sure why:

[Error] TypeError: undefined is not a function (evaluating '$('.chosen-  select').chosen({
  allow_single_deselect: true,
  no_results_text: 'No results matched',
  width: '100%'
})')

My application.js looks like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap

//= require jquery.turbolinks
//= require chosen-jquery
//= require scaffold
//= require jquery.purr
//= require best_in_place
//= require bootstrap-datepicker
//= require jquery-fileupload
//= require autocomplete-rails
//= require jquery-ui
//= require jquery.countdown
//= require autocomplete-rails
//= require bootstrapValidator.min

//= require turbolinks

//= require_tree .

And in application.css.scss I have this line:

*= require chosen_bootstrap

My HTML (or (HAML) looks like this:

= select_tag "tag", options_from_collection_for_select(@team_tags, 'name', 'name', params[:tag]), prompt: "All tags", class: 'form-control chosen-select select-ideas-tag', onchange: "window.location.replace('/teams/#{@team.id}/tags/' + this.value + '?search=#{params[:search]}');"

And my JS (or CoffeeScript) looks like this:

# enable chosen js
$('.chosen-select').chosen
  allow_single_deselect: true
  no_results_text: 'No results matched'
  width: '100%'

Any ideas why it isn't working?

Update

Seems like it's not only chosen-rails that have stopped working, but it seems like JS have stopped working altogether. None of my libraries works as expected. I have tried to both rebuild and cleaned my assets, but it didn't help.

Not sure what could have caused this, or how to find the main issue.

Any ideas?

Answer 1

It turned out that I wan including jQuery twice. Once in application.html and also in application.js. Removing the one in application.html made it work.

Answer 2

Possible Reasons:

Including both jquery and chosen twice in the application. Doubly including either may cause this error.

You can try this as well,

//= require jquery

//= require jquery.turbolinks

//= require jquery_ujs

//= require chosen-jquery

//= require scaffold

//= require jquery.purr

//= require jquery-ui

//= require bootstrap

//= require jquery.countdown

//= require turbolinks

//= require_tree .

Why require both jquery.turbolinks and turbolinks. Can you disable turbolinks and check?

Answer 3

Your suggestion that all JS stopped working indicates that your initialization code causes an error: it stops all further evaluation of JS code. The error shows some spacing between 'chosen- select' (bit more to indicate the problem). Might there be a nonprintable character between the dash and 'select'?

My order of tracing the problem is:

1. First check if JS is working or not by putting a alert popup BEFORE and AFTER your code. But is seems your code is reached.
2. Your initialization code might be in the wrong place: Turbolinks has some requirements on the place of initialization code, but that problably is not a problem until you run the production version.
3. The error is not quite specific about WHAT part is the problem. It might even be that 'select' from the string is evaluated. Split up this command to make sure you are not jumping too fast to the correct property, by first assigning something absolutely wrong but identifiable in the parameter hash. Then check if #('chosen-select') even has a usable result (your views might be broken).

Remember, if this script crashes and it is the first initialization code, most JS might not be called anymore.

I hope this info points you in the right direction....