javascript - bootstrap - selectize on change
TypeError: $(...).selectize no es una función (3)
Creo que tienes un problema de dependencia de jQuery causado por la gema jQuery-rails. Prueba esto:
1) Comenta esta línea en tu Gemfile
gem ''coffee-rails'', ''~> 4.0.1''
#gem ''jquery-rails'', ''~> 2.3.0''
gem ''turbolinks'', ''~> 1.1.1''
2) Ejecute la bundle install
3) Descargue esta versión de jQuery y colóquela en su carpeta vendor/assets/javascript .
EDITAR
Para migrar a la versión no gema, coloque estos archivos en las siguientes rutas:
- proveedor / assets / stylesheets / selectize.css
- proveedor / assets / javascript / selectize.min.js
- proveedor / assets / javascript / sifter.js
- proveedor / assets / javascript / microplugin.js
Instalé la gema "selectize-rails" en mi aplicación Rails, y estoy intentando que funcione. Sigo recibiendo este error en mi consola web:
TypeError: $(...).selectize is not a function
y no pasa nada en el navegador. Aquí está el código que tengo hasta ahora, siguiendo el ejemplo de "Contactos por correo electrónico" de esta página: 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 parece estar incluido en mi aplicación: este es el <head> de la fuente de mi página :
<!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
¿Alguien que ha usado Selectize sabe lo que me podría estar perdiendo?
ACTUALIZAR:
Se vuelve más raro: el código propenso a errores comenzó a funcionar aleatoriamente, pero luego se rompió de nuevo al actualizar
Había resuelto el mismo problema al eliminar jQuery include, que se incluyó dos veces. Hay una nota sobre eso en los comentarios, pero está colapsado y me di cuenta de eso. Publicar esto como respuesta para que las personas lo noten.
Para mí, el problema era que mi código de aplicación se estaba incluyendo antes de selectize.js . Agregar //= require selectize app/assets/javascripts/application.js antes de //= require_tree . arreglado.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require selectize
//= require_tree .