Using Selectize with Node.js

Question

I'll preface this by saying that I'm fairly new to Javascript in general, but I'm getting there. I've got an app that's written with Node.js, Express, and uses Bootstrap for the front end.

I'm trying to use Selectize to gain some additional functionality with one of my forms, but I can't get it to work at all. The text input field is present, but it's lacking the functionality/styling that I'm looking for. I'm using Handlebars for templating, and I think my issues may have something to do with that.

I'm lost at this point, and any advice would be super useful.

Here's my simple testing page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
    <!-- Icon -->
    <link href="/images/favicon.ico" rel="icon">
    <!-- Selectize.js -->
    <link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
    <h1>Testbed2</h1>
    <br>

    <div class="demo">
        <input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
    </div>

    <script>
        var data = [ "option 1", "option 2", "option 3" ];
        var items = data.map(function(x) { return { item: x }; });

        $('#input-tags').selectize({
            delimiter: ',',
            persist: false,
            maxItems: 2,
            options: items,
            labelField: "item",
            valueField: "item",
            sortField: 'item',
            searchField: 'item'
        });
    </script>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>

Take a look at this answer here: http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer It looks like you are trying to use JQuery before it loads. — Sweet_Pete, Jul 28 '16 at 16:55

score 2 · Answer 1 · answered Jul 28 '16 at 17:07

To keep your code style and place your scripts at the end of your document, you can try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
    <!-- Icon -->
    <link href="/images/favicon.ico" rel="icon">
    <!-- Selectize.js -->
    <link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
    <h1>Testbed2</h1>
    <br>

    <div class="demo">
        <input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
    </div>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
        var data = [ "option 1", "option 2", "option 3" ];
        var items = data.map(function(x) { return { item: x }; });

        $('#input-tags').selectize({
            delimiter: ',',
            persist: false,
            maxItems: 2,
            options: items,
            labelField: "item",
            valueField: "item",
            sortField: 'item',
            searchField: 'item'
        });
    </script>
  </body>
</html>

This way will prevent a jquery error but I'm unfamiliar with selectize to know if this script is working as you intended.

Using Selectize with Node.js

1 Answers1