admin管理员组

文章数量:1287967

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: .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 ''
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_pressor = :uglifier
  config.assetspile = 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.prepile += %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

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'
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_pressor = :uglifier
  config.assets.pile = 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.prepile += %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

  • javascript
  • jquery
  • ruby-on-rails
  • rubygems
  • selectize.js
Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked Jan 3, 2015 at 17:40 Joe MoranoJoe Morano 1,89510 gold badges59 silver badges124 bronze badges 40
  • that error generally means you either forgot to load the plugin file,or the path is wrong to the file, or you have loaded jQuery more than once and wiped out that plugin. It is not a problem specific to any particular plugin. In short, the error is telling you that function declaration can't be found at the time your code runs – charlietfl Commented Jan 3, 2015 at 17:46
  • @charlietfl But it's a gem. Do I need to download additional files even after installing the gem? – Joe Morano Commented Jan 3, 2015 at 20:41
  • I don't know (not a rails dev) but you can at least inspect the output and see what's there and what's not. Browser could care less how your back end works – charlietfl Commented Jan 3, 2015 at 20:48
  • Nope. you don't have to download the plugin files; the gem handles that part. Could you include the full content of the javascripts/application.js file? The //= require selectize directive should be after //= require jquery for it to work properly. When it is working properly, you should be able to see selectize.js as one of the loaded files in Sources on the browser. – Prakash Murthy Commented Jan 4, 2015 at 4:25
  • 1 And there it is, jQuery is included multiple times, so is jQuery UI in various forms. Make sure jQuery and jQuery UI is only included once in the document, and that the order is correct, i.e. jQuery es before jQuery UI, then the plugins, and at the end your scripts using all the former etc. – adeneo Commented Jan 9, 2015 at 20:41
 |  Show 35 more ments

3 Answers 3

Reset to default 4 +150

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

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

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 .

本文标签： javascriptTypeError ()selectize is not a functionStack Overflow

版权声明：本文标题：javascript - TypeError: $(...).selectize is not a function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741332113a2372823.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。