I installed the "selectize-rails" gem into my rails app, and I'm trying to get it to work. I keep getting this error in my web console:
TypeError: $(...).selectize is not a function and nothing happens in the browser. Here's the code I have so far, following the "Email Contacts" example from this page: http://brianreavis.github.io/selectize.js/
views/emails/new.html.erb
<script type="text/javascript"> $(document).ready(function() { console.log( typeof $.fn.selectize === 'function'); // true console.log( $('#select-to').length === 1 ); // true var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' + '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)'; $('#select-to').selectize({ persist: false, maxItems: null, valueField: 'email', labelField: 'name', searchField: ['name', 'email'], options: [ {email: 'brian@thirdroute.com', name: 'Brian Reavis'}, {email: 'nikola@tesla.com', name: 'Nikola Tesla'}, {email: 'someone@gmail.com'} ], render: { item: function(item, escape) { return '<div>' + (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') + (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') + '</div>'; }, option: function(item, escape) { var label = item.name || item.email; var caption = item.name ? item.email : null; return '<div>' + '<span class="label">' + escape(label) + '</span>' + (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') + '</div>'; } }, createFilter: function(input) { var match, regex; // email@address.com regex = new RegExp('^' + REGEX_EMAIL + '$', 'i'); match = input.match(regex); if (match) return !this.options.hasOwnProperty(match[0]); // name <email@address.com> regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'); match = input.match(regex); if (match) return !this.options.hasOwnProperty(match[2]); return false; }, create: function(input) { if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) { return {email: input}; } var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i')); if (match) { return { email : match[2], name : $.trim(match[1]) }; } alert('Invalid email address.'); return false; } }); }); </script> application.html.erb
<head> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <%= javascript_include_tag "jquery.endless-scroll" %> <%= yield(:head) %> </head> javascripts/application.js
//= require jquery //= require jquery_ujs //= require jquery-ui //= require bootstrap //= require turbolinks //= require selectize //= require_tree . Selectize.js seems to be included in my application: this is the <head> from my page source:
<!DOCTYPE html> <html> <head> <!--...--> <link href="/assets/selectize.css?body=1" media="screen" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/jquery-ui.structure.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/jquery-ui.theme.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" /> <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/sifter.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/microplugin.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/selectize.min.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.color.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.endless-scroll.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/users.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="KjspKaF93jfFsjf8jsoaisHSf=" name="csrf-token" /> </head> Gemfile:
source 'https://rubygems.org' ruby '2.0.0' gem 'rails', '4.0.10' gem 'bootstrap-sass', '~> 2.3.2.0' gem 'sprockets', '~> 2.12' gem 'chosen-rails' gem 'bcrypt', '~> 3.1.7' gem 'therubyracer' gem 'sass-rails', '4.0.5' gem 'uglifier', '~> 2.1.1' gem 'coffee-rails', '~> 4.0.1' gem 'jquery-rails', '~> 2.3.0' gem 'turbolinks', '~> 1.1.1' gem 'jbuilder', '~> 1.0.2' gem 'libv8', '3.16.14.7' gem 'yaml_db_improved' gem 'selectize-rails' group :development, :test do gem 'sqlite3', '~> 1.3.8' gem 'rspec-rails', '~> 2.13.1' end group :test do gem 'selenium-webdriver', '~> 2.35.1' gem 'capybara', '~> 2.1.0' end group :doc do gem 'sdoc', '~> 0.3.20', require: false end group :production do gem 'rails_12factor', '~> 0.0.2' end config/environments/production.rb:
Website::Application.configure do config.cache_classes = true config.eager_load = true config.consider_all_requests_local = false config.action_controller.perform_caching = true config.serve_static_assets = false config.assets.js_compressor = :uglifier config.assets.compile = false config.assets.digest = true config.assets.version = '1.0' config.log_level = :info config.i18n.fallbacks = true config.active_support.deprecation = :notify config.log_formatter = ::Logger::Formatter.new end config/environments/development.rb:
Website::Application.configure do config.cache_classes = false config.eager_load = false config.consider_all_requests_local = true config.action_controller.perform_caching = false config.action_mailer.raise_delivery_errors = false config.active_support.deprecation = :log config.active_record.migration_error = :page_load config.assets.debug = true end config/application.rb:
require File.expand_path('../boot', __FILE__) require "active_record/railtie" require "action_controller/railtie" require "action_mailer/railtie" require "sprockets/railtie" Bundler.require(*Rails.groups) module Website class Application < Rails::Application config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) end end Does anyone who has used Selectize know what I might be missing?
UPDATE:
It gets weirder: Error-prone code randomly started working, but then broke again upon refresh