Undefined taginput bootstrap 3 initialization function

Question

I am trying to implement TagInput for bootstrap 3, but when I try to initialize it, it gives me an Uncaught TypeError: Property 'undefined' of object #<TagsInput> is not a function error Uncaught TypeError: Property 'undefined' of object #<TagsInput> is not a function

This is how I call scripts

 <script src='<?php echo base_url() ?>resources/js/jquery-1.7.2.min.js' type='text/javascript'></script> <script src='<?php echo base_url() ?>resources/js/bootstrap.js' type='text/javascript'></script> <script src='<?php echo base_url() ?>resources/js/bootstrap-tagsinput.js' type='text/javascript'></script> <script> $('.tagplayer').tagsinput();</script> 

The form

 <input type="text" class="tagplayer"> 

Edit: I no longer work with this plugin, I need to offer the correct answer.

Answer 1

I have the same problem. Let the author forget to test after some revision. Open bootstrap-tagsinput.js, and in the last line you will see the following code:

  $(function() { $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput(); }); 

As you can see, the tagsinput() function is called in this js code. Therefore, including your call to tagsinput() in your code, there are 2 calls to tagsinput() .

As a result, on line 357, where the tagsinput() registration functions as a jquery plugin, initialization failed.

To solve this problem, comment on the top code. (But maybe you can use some functions, but not importan

In any case, you need to enable bootstrap-tagsinput.css .

Answer 2

See this issue on GitHub: https://github.com/TimSchlechter/bootstrap-tagsinput/issues/52

Workaround that helped me:

 <input type="text" id="tags"> <script> var tags = $('#tags') tags.tagsinput(); tags.tagsinput('input').typeahead({ prefetch: 'prefetch.json' }).bind('typeahead:selected', $.proxy(function (obj, datum) { tags.tagsinput('add', datum.value); tags.tagsinput('input').typeahead('setQuery', ''); }, $('input'))); </script>