我将“selectize-rails”gem 安装到我的 rails 应用程序中，我正在尝试让它工作。我的 Web 控制台中不断出现此错误:
TypeError: $(...).selectize is not a function
浏览器中没有任何反应。这是我到目前为止的代码，遵循此页面中的“电子邮件联系人”示例: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 似乎包含在我的应用程序中:这是 <head>来 self 的页面源:
<!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>
gem 文件:
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
使用过 Selectize 的人知道我可能遗漏了什么吗？
更新:
它变得更奇怪了:Error-prone code randomly started working, but then broke again upon refresh
最佳答案
我认为您遇到了由 jQuery-rails gem 引起的 jQuery 依赖性问题。试试这个:
1) 在您的 Gemfile
gem 'coffee-rails', '~> 4.0.1'
#gem 'jquery-rails', '~> 2.3.0'
gem 'turbolinks', '~> 1.1.1'
2) 运行bundle install
3) 下载this jQuery 版本并放入您的 vendor/assets/javascript 文件夹中。
编辑
要迁移到非 gem 版本，请将这些文件放在以下路径中:
- vendor/assets/stylesheets/selectize.css
- vendor/ Assets /javascript/selectize.min.js
- vendor/ Assets /javascript/sifter.js
- vendor/ Assets /javascript/microplugin.js
关于javascript - TypeError : $(. ..).selectize 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27757666/