I need help,
My tag it doesn't work properly inside bootstrap modal,
The availableTags Option won't show up when I'm typing from inside the Bootstrap Modal,
But when I put it outside the bootstrap modal, the availableTags show up.
here is my code,
<head>
<!-- Include JQUERY and JQUERY UI and JQUERY TAG IT -->
<script>
$(function(){
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
$('#serverTagsInsideModal').tagit({
availableTags: sampleTags
});
$('#serverTagsOutsideModal').tagit({
availableTags: sampleTags
});
});
</script>
</head>
<body>
<div id="newServerModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Server</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="server_tag">Server Tags</label>
<ul id="serverTagsInsideModal"></ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<ul id="serverTagsOutsideModal"></ul>
</body>
You probably found this already, but this answer fixed it for me:
https://github.com/aehlke/tag-it/issues/171