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

[nepsdotin]

I get this Error
The JQuery Ver: v1.8.3 is included. But Why am i getting this ?
Your response is greatly appreciated.

[rcarmonad]

Do you have any code to show?

[PhiLhoSoft]

"_Why am i getting this ?_"
Because ... isn't a valid JavaScript identifier / string...

[astroanu]

make sure to include microplugin and sifter js to your document.

[nepsdotin]

Thanks @astroanu it worked. That was the problem.

[anthonator]

For anybody else who stumbles upon this, you can also use the standalone version. This will prevent you from having to pull in dependencies.

[robganly]

Strange, I'm linking to .../js/standalone/selectize.min.js and still getting this error... any ideas?

[wasi786rehman]

I am also getting this error i am also linking with standalone version Plz help

[Clarity-89]

Still getting this error with with standalone version.

[samu]

I had the same problem, here's why:

I'm using webpack and required selectize like this:

import 'selectize/dist/js/standalone/selectize.min.js';

So far so good! The problem was that i had jquery included manually in my index.html, like this:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

Webpack was still bundling jquery into the bundle, because selectize itself of course has a dependency on jquery.

So in short: i had two different versions of jquery loaded on my page!

I fixed it simply by removing the manually included jquery link.

[ano]

This is what worked for me as I needed 2 different versions of jQuery. One for selectize and one for the core system. I used the jQuery.noConflict() method to wrap my custom logic in a function scope and avoid conflicts.

var jq14 = jQuery.noConflict(true); 

(function ($) {
    $(document).ready(function () {
            $("li select").selectize({
                placeholder: "Search...",
                allowClear: true
            });
    });
}(jq14));

[danielsantoso]

This is what worked for me as I needed 2 different versions of jQuery. One for selectize and one for the core system. I used the jQuery.noConflict() method to wrap my custom logic in a function scope and avoid conflicts.

var jq14 = jQuery.noConflict(true); 

(function ($) {
    $(document).ready(function () {
            $("li select").selectize({
                placeholder: "Search...",
                allowClear: true
            });
    });
}(jq14));

Thank you very much brother. you save my life. haha

[wdiechmann]

been enjoying selectize for a couple of small projects I decided to go dip my toes into the rails 6/webpacker trough 😨

The barrel seems, however, to be quite deeper than I anticipated 😢

I have made sure that my environments.js has jquery

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
  })
)

I've taken @HHGB12 literally to the letter with

# app/javascript/components/selectize.js
import 'selectize/dist/js/selectize.min.js'; # scroll to node folder (1) get that path
import 'selectize/dist/css/selectize.css'; # scroll to node folder (1) get that path

const selectize = () => {
  $('.select-beast').selectize({
      // create: true, (from example on selectize page)
      sortField: 'text'
  });

};

export { selectize }; # app/javascript/packs/application.js will call that const

but then my console complains that TypeError: $(...).selectize is not a function at selectize (selectize.js:10)

If I "wait" with calling the selectize() 'till the page is loaded,

  $ -> 
    selectize()

I am thrown yet another curve ball - jQuery.Deferred exception: selectize is not defined - which just shows to the public that I don't know the first thing about scoping javascript with webpack. In Rails 4/5 I'd put my stuff in a app.coffee with App = App || (App = {name: 'App'}) on top and life was good (I could even split my code into different sourcefiles and 'build' the App scope out with different, ehh, modules is not the right word as that implies some Javascript-fu which I'm not at all up to, but more ruby-ish reopening of classes). Now I'm just barely able to get javascript/packs/app.coffee to run when turbolinks:load'ed and I am not able to tap into it from say pick_lists/_form.html.haml with stuff like

  $ ->
    App.setPageEvents()

like I'm accustomed.

For the life of me I cannot put my finger on what is going on here - webpacker/yarn has littered my node_modules with 126M/825 modules - which I am certainly not impressed with, but I'm digressing.

I'd really like a push in the right direction - something about this webpack thing is not sitting right with me I'm afraid 😭

ohh - and I'm very sorry to litter this thread, if my hardship has nothing to do with loading selectize the right way 😥

[LarsStegman]

@wdiechmann Did you ever figure out how to fix this?

[Volmarg]

Using Symfony 4.4 with Encore Webpack, this worked for me:

import * as $ from 'jquery';
import 'selectize/dist/js/selectize.min.js';
import 'selectize/dist/css/selectize.css';
import 'selectize/dist/css/selectize.bootstrap3.css';

export default class Selectize {

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days