jQuery conflicting with Selectize.js

Question

I'm trying to setup a simple select box with Selectize.js and keep getting an error message on page load that keeps it from working.

Here is the error

Here's the code...I'm just trying to get the first select box to work so there is no id or jquery for the other. Seems like the jquery is conflicting with the selectize.js for some reason and I can't figure it out. Tried organizing the script tags differently, didn't work.

$(function() {
  $('#select-category').selectize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/selectize.css">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/scripts.js"></script>
  <script type="text/javascript" src="scripts/selectize-custom.js"></script>
  <script type="text/javascript" src="scripts/selectize.min.js"></script>

</head>
<body>

    <header>
        <div class="wrapper">
            <a href="" title="">
                <h1 id="logo">Maark</h1>
            </a>
            <div class="nav-bar">
              <form>
                <label>Single selection
                <select id="select-category">
                  <option value="0">Zero</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                </select>
                </label>
                <label>Multiple selection
                <select multiple>
                  <option value="0">Zero</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                </select>
                </label>
              </form>
            </div>
        </div>
    </header>

    <div class="main-container container-fluid">

          <ul class="row">
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="brub" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="#" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
        </ul>


    </div>





</body>
</html>

I believe you are declaring the function before defining the library. Move scripts/scripts.js to after scripts/selectize.min.js, and let us know what happens. — Sina
– Sina, Commented Jul 27, 2016 at 3:24
I second @Sina's suggestion. Fwiw, I have also seen this error in Selectize when I loaded it into a RequireJS project - but basically your code doesn't understand "selectize" actually refers to that library, it doesn't know the name. Another solution, one that worked for me, is loading the two dependencies (sifter.js and microplugin.js) BEFORE selectize.js and also BEFORE your scriipts.js file. I don't know if you need the dependencies loaded like I did, but you can try it if the above fails. Hope that helps. — RoboBear
– RoboBear, Commented Jun 1, 2017 at 20:59

Community · Accepted Answer · 2017-05-23 12:32:42Z

0

It seems your selectize.js is not including to current file properly.

Firstly, you need to check that the current path to your js file is valid.

Also try to adding a dot slash to your current path. Like;

This is a real common problem with locally added jQuery file, too. Check:

jQuery code doesn't work if I'm using a local jquery.js file, why?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 27, 2016 at 3:23

Lala

631 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery conflicting with Selectize.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related