Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: $(...).selectize is not a function

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: '[email protected]', name: 'Brian Reavis'},
        {email: '[email protected]', name: 'Nikola Tesla'},
        {email: '[email protected]'}
      ],
      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 protected]
        regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
        match = input.match(regex);
        if (match) return !this.options.hasOwnProperty(match[0]);

        // name <[email protected]>
        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

like image 865
Joe Morano Avatar asked Jan 03 '15 17:01

Joe Morano


3 Answers

I think you have a jQuery dependency issue caused by the jQuery-rails gem. Try this:

1) Comment out this line in your Gemfile

gem 'coffee-rails', '~> 4.0.1'
#gem 'jquery-rails', '~> 2.3.0'
gem 'turbolinks', '~> 1.1.1'

2) Run bundle install

3) Download this version of jQuery and put in in your vendor/assets/javascript folder.

EDIT

To migrate to the non-gem version place these files in the following paths:

  • vendor/assets/stylesheets/selectize.css
  • vendor/assets/javascript/selectize.min.js
  • vendor/assets/javascript/sifter.js
  • vendor/assets/javascript/microplugin.js
like image 168
eabraham Avatar answered Oct 11 '22 06:10

eabraham


I had resolved same issue by removing jQuery include, that was included twice. There's note about that in the comments, but it's collapsed and I figured that out myself. Posting this as answer for people to notice it.

like image 22
dragonattack Avatar answered Oct 11 '22 04:10

dragonattack


For me, the issue was that my application code was being included before selectize.js. Adding //= require selectize to app/assets/javascripts/application.js before //= require_tree . fixed it.

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require selectize
//= require_tree .
like image 22
Jason Swett Avatar answered Oct 11 '22 04:10

Jason Swett