Uncaught TypeError: $(…).tokenfield is not a function
Question
I'm new of jQuery and Bootstrap. everything was working perfectly until i decided to use the Bootstrap Tokenfield to add a search system based.
Now when i try to execute my ,jsp page i get: Uncaught TypeError: $(...).tokenfield is not a function
This is my .jsp page
JQuery import
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title></title>
</head>
Component declaration
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
Where am I doing worng? I'm forgetting to bring something?
2 answers
solution1
2 ACCPTED 2016-06-25 19:15:16
the DOM are telling you that it didn't know that tokenfield function because it is not declared in your header so you have to load those 2 files first before using it :
1 - load the dist/bootstrap-tokenfield.min.js
2 - load the dist/css/bootstrap-tokenfield.css in your HTML
and let your code as it is
NB : those 2 libraris need as requirements: jQuery 1.9+, Bootstrap 3+ (only CSS)
the libraries link is here : http://www.github.com/sliptree/bootstrap-tokenfield/archive/master.zip
solution2
0 2016-06-25 19:00:38
Try this and you have to include bootstrap-tokenfield.js in index.html
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.