How to overcome this error :Cannot read property 'selectize' of undefined?

Question

I keep receiving errors as mentioned in the question at this line of js:

  var $filter = $('#share_tags')[0].selectize;

The related html is also attached alongside..

 (function() { // Extra symbols for our share expression var symbols = ['+','|','~','(',')'], symbolCount = {}; // Initialize all symbols count to 0 symbols.forEach(function(s) { symbolCount[s] = 0; }); // our ops var ops = [ { value: '+', text: 'AND', symbol:true }, { value: '|', text: 'OR', symbol: true }, { value: '~', text: 'NOT', symbol: true }, { value: '(', text: '(', symbol: true }, { value: ')', text: ')', symbol: true } ]; function getText(value) { for(var i = 0, len = ops.length; i < len; i += 1) { if (ops[i].value === value) { return ops[i].text; } } } // User select $('#share_with').selectize({ openOnFocus: false, }); // Tag select $('#share_tags').selectize({ persist: false, onItemAdd: function(value, $item) { if (symbolCount.hasOwnProperty(value[0])) { var value = value[0], count = symbolCount[value]; $filter.addOption({ value: value + '' + (count+1), text: getText(value) }); symbolCount[value] += 1; $filter.refreshOptions(); } }, onItemRemove: function(item) { if (symbolCount.hasOwnProperty(item[0]) !== -1) { for (opt in $filter.options) { if ($filter.options.hasOwnProperty(opt)) { if (opt !== item && opt[0] === item) { delete $filter.options[opt]; } } } } } }); var $filter = $('#share_tags')[0].selectize; $('#shareForm').on('submit', function(e) { var tags = $('#share_tags').val(), expression = [], symbol, item; for (var i = 0, len = tags.length; i < len; i += 1) { item = tags[i]; if (symbolCount.hasOwnProperty(item[0]) !== -1) { symbol = item[0] === '+' ? '&' : item[0]; expression.push(symbol); } else { expression.push(item); } } $('#share_expression').val(expression.join('')); }); $(document).keyup(function(e) { if (e.keyCode == 27) { $(".search-card").removeClass("hide"); } // esc }); $('.js-share-btn').on('click', function(e) { $(".search-card").addClass("hide"); App.Util.preventDefault(e); Avgrund.show("#createShare"); }); $('.edit-share-button').on('click', function(e) { $(".search-card").addClass("hide"); App.Util.preventDefault(e); Avgrund.show("#createTaskShare"); }); $(".js-popup-close").on("click",function () { $(".search-card").removeClass("hide"); }); }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> {% set created_tags = [t for t in tags if t.tag.created_by == current_user] %} <form name="shareForm" id="shareForm" method="post" action="/share/new"> <fieldset> <h3>Share card</h3> </fieldset> <div class="form-group"> <label for="share_name">Card name</label> <input type="text" class="form-control" name="share_name" id="share_name" required="required"> </div> <div class="form-group"> <label for="share_tags">Tag</label> <select class="form-control" name="share_tags" id="share_tags" required="required" placeholder="Pick a tag to share"> {% if q[0] == '#' %} {% set name, id = q.split("/") %} <option value="{{ id }}">{{ name }}</option> {% end %} </select> {# <select class="form-control" name="share_tags" id="share_tags" required="required" multiple="multiple" placeholder="Pick a tag to share"> <option value=""></option> <optgroup label="Tags"> {% for t in created_tags %} <option value="{{ t.tag.id }}">{{ t.tag.name }}</option> {% end %} </optgroup> <optgroup label="Filters"> <option value='+'>AND</option> <option value='|'>OR</option> <option value='~'>NOT</option> <option value='('>(</option> <option value=')'>)</option> </optgroup> </select> #} </div> <div class="form-group"> <label for="share_with">Share with</label> <select class="input-control" name="share_with" id="share_with" required="required" multiple="multiple" placeholder="Choose a few people"> <option value="">Select a user</option> {% for user in contacts %} {% if user.id != 1 %} <option value="{{ user.id }}">{{ user.name }} &lt;{{ user.email }}&gt;</option> {% end %} {% end %} </select> </div> {% module xsrf_form_html() %} <input type="hidden" name="share_expression" id="share_expression" value=""> <div class="form-group"> <button type="submit" class="btn btn-primary share-btn">Share</button> <button type="button" class="btn-link js-popup-close">Cancel</button> </div> </form> 

Answer 1

Selectize is a Jquery plugin. If you don't import it, you will not be able to use it. (that is the error, your objects don't have a selectize property).

You can see the plugin page , or it's github .

Download it here and try it.

Remember to add the following lines:

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />