0

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

enter image description here

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>

2
  • 1
    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. Commented Jul 27, 2016 at 3:24
  • 1
    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. Commented Jun 1, 2017 at 20:59

1 Answer 1

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?

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.