I'm trying to use standalone selectize library in my webapplication. But getting this error
Uncaught TypeError: $(...).selectize is not a function
Here is my code: In header
<script type="text/javascript" src=".4.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/selectize.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/selectize.default.css" >
In the html file
<label for="input-tags3">Skills</label>
<input id="input-tags3" name="skills" type="text" th:field="*{skills}" class="demo-default selectized text-input" value="science,biology,chemistry" tabindex="-1" style="display: none;">
<div class="selectize-control demo-default multi plugin-remove_button">
<div class="selectize-input items not-full has-options has-items">
<div class="item" data-value="science">science<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<div class="item" data-value="biology">biology<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<div class="item" data-value="chemistry">chemistry<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<input type="text" autoplete="off" tabindex="" id="input-tags3-selectized" style="width: 4px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown multi demo-default plugin-remove_button" style="display: none; width: 520px; top: 36px; left: 0px; visibility: visible;">
<div class="selectize-dropdown-content">
<div class="option" data-selectable="" data-value="physics">physics</div>
</div>
</div>
</div>
In the js file
$('#input-tags3').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
What's missing?
I'm trying to use standalone selectize library in my webapplication. But getting this error
Uncaught TypeError: $(...).selectize is not a function
Here is my code: In header
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/selectize.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/selectize.default.css" >
In the html file
<label for="input-tags3">Skills</label>
<input id="input-tags3" name="skills" type="text" th:field="*{skills}" class="demo-default selectized text-input" value="science,biology,chemistry" tabindex="-1" style="display: none;">
<div class="selectize-control demo-default multi plugin-remove_button">
<div class="selectize-input items not-full has-options has-items">
<div class="item" data-value="science">science<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<div class="item" data-value="biology">biology<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<div class="item" data-value="chemistry">chemistry<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
<input type="text" autoplete="off" tabindex="" id="input-tags3-selectized" style="width: 4px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown multi demo-default plugin-remove_button" style="display: none; width: 520px; top: 36px; left: 0px; visibility: visible;">
<div class="selectize-dropdown-content">
<div class="option" data-selectable="" data-value="physics">physics</div>
</div>
</div>
</div>
In the js file
$('#input-tags3').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
What's missing?
Share Improve this question edited Jun 24, 2019 at 1:50 Ima Miri asked Jun 24, 2019 at 1:25 Ima MiriIma Miri 9972 gold badges15 silver badges33 bronze badges 7-
Are you including jQuery? Where do you define
options
? – Tyler Roper Commented Jun 24, 2019 at 1:28 - Yes, I've added <script type="text/javascript" src="ajax.googleapis./ajax/libs/jquery/3.4.0/…> – Ima Miri Commented Jun 24, 2019 at 1:29
-
Before selectize? And where do you define
options
? EDIT: Per your edit: jQuery must be included before any jQuery plugins. You're currently including selectize before jQuery. EDIT 2: Can you please copy + paste your actual code? It's hard to know what your mistake is if you continuously edit them out. – Tyler Roper Commented Jun 24, 2019 at 1:30 - I updated it, it's before selectize. – Ima Miri Commented Jun 24, 2019 at 1:32
- @TylerRoper sorry about that. last update is correct – Ima Miri Commented Jun 24, 2019 at 1:35
2 Answers
Reset to default 3You should wrap $('select').selectize();
by $(function() {})
as follows in order to initialize jQuery prototype.
<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
$('select').selectize(options);
});
</script>
Refer here to get details.
PS: For options
, you could refer to the following examples:
- Doc https://github./selectize/selectize.js/blob/master/docs/usage.md#configuration
- Example https://github./selectize/selectize.js/blob/master/examples/cities.html
...
$select_city = $('#select-city').selectize({
valueField: 'name',
labelField: 'name',
searchField: ['name']
});
select_city = $select_city[0].selectize;
...
select_city.disable();
...
The issue fixed after adding the jquery at the beginning of the document.ready function.
$(document).ready(function(){
$('#input-tags3').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
....
});