问题描述
我将selectize-railsgem安装到了我的rails应用程序中,并试图使其运行。我一直在我的Web控制台收到这个错误:
TypeError:$(...)。selectize不是函数
在浏览器中没有任何反应。以下是我目前使用的代码,以下是此页面中的电子邮件联系人示例:
views / emails / new.html .erb $ b
< script type =text / javascript>
$ b $(document).ready(function(){
console.log(typeof $ .fn.selectize ==='function'); // true
console.log($('#select-to')。length === 1); // true
var REGEX_EMAIL ='([a-z0-9!#$%& amp ; \ '?* + / = ^ _`{|}〜 - ] +(?:\ [A-Z0-9#$%&安培;!\'?* + / = ^ _`{| (?:[a-z0-9]([:a-z0-9])* [a-z0-9])?\。)+ [a- ('#:'#select-to')。selectize({$ [$ a $ z $ 9 $] b $ b persist:false,
maxItems:null,
valueField:'email',
labelField:'name',
searchField:['name','email'] ,
选项:[
{email:'[email protected]',姓名:'Brian Reavis'},
{email:'[email protected]',姓名:'Nikola特斯拉'},
{email:'[email protected]'}
],
渲染:{
item:function(item,escape){
return '< div> +
(item.name? <跨度类= 名称 > +逸出(item.name)+‘< /跨度>’:)+
(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]);
//名称< [email protected]>
regex = new RegExp('^([^ <* match = input.match(regex);
if(match)return!this.options.hasOwnProperty(match [2]);
返回false;
},
create:function(input){
if((new RegExp('^'+ REGEX_EMAIL +'$','i'))。test(input)){
return {email:input};
}
var match = input.match(new RegExp('^([^ return {
email:match [2],
name:$ .trim(match [1])$ b $ b};
}
alert('无效的电子邮件地址');
返回false;
}
});
});
< / script>
application.html.erb strong>
< head>
<%= csrf_meta_tags%>
<%= javascript_include_tagjquery.endless-scroll%>
<%= yield(:head)%>
< / head>
javascripts / application.js strong>
// =要求jquery
// =要求jquery_ujs
// =要求jquery- ui
// =需要引导程序
// =需要turbolinks
// =需要选择
// = require_tree。
Selectize.js似乎包含在我的应用程序中:这是来自我的网页来源的< head>
:
<!DOCTYPE html>
< html>
< head>
< link href =/ assets / selectize.css?body = 1media =screen =stylesheet/>
< link data-turbolinks-track =truehref =/ assets / jquery-ui.css?body = 1media =all =stylesheet/>
< link data-turbolinks-track =truehref =/ assets / jquery-ui.structure.css?body = 1media =all =stylesheet/>
< link data-turbolinks-track =truehref =/ assets / jquery-ui.theme.css?body = 1media =all =stylesheet/>
< meta content =authenticity_tokenname =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'selected-rails'
gem'bcrypt','〜> 3.1.7'
gem'therubyracer'
gem'sass-rails','4.0.5'
gem'uglifier','〜> 2.1.1'
gem'咖啡栏','〜> 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做
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'
结束
组:doc do
gem'sdoc','〜> 0.3.20',要求:假
结束
组:生产do
gem'rails_12factor','〜> 0.0.2'
end
config / environments / production.rb :
网站:: 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 p>
Website :: Application.configure do
config.cache_classes = false
config.eager_load = false
config.consider_a ll_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__)
需要active_record / railtie
需要action_controller / railtie
需要action_mailer / railtie
需要sprockets / railtie
Bundler.require(* Rails.groups)
模块网站
类应用程序< Rails :: Application
config.assets.precompile + =%w(*。png * .jpg * .jpeg * .gif)
end
end
是否有人使用Selectize知道我可能错过了什么?
更新:
它会变得很奇怪:版本的jQuery,并放入 vendor / assets / javascript
文件夹中。
编辑
要迁移到非宝石版本,请将这些文件放在以下路径中:
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
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
这篇关于TypeError:$(...)。selectize不是一个函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!