undefined function initializing taginput bootstrap 3

Question

I'm try to implement TagInput for bootstrap 3 but when i try to inizialize it, it give me a error Uncaught TypeError: Property 'undefined' of object #<TagsInput> is not a function

Here is how i call the 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>

form

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

Edit: I'm not currently work anymore with this plugin, i need suggest for accept the right answer.

Answer 1

I got the same problem. May the author forgot to test after some revision. Open bootstrap-tagsinput.js, and at the last line you can see the following code;

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

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

As a result, at line 357 where registering tagsinput() function as a jquery plugin, the initializing is failed.

To solve this, comment upper code. (But maybe you can use some functionalties, but not importan

Anyway, you need to include bootstrap-tagsinput.css too.

Answer 2

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

A 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>

Answer 3

I also had problems chosing the right plugin. At the end, I just implemented taginput myself, it's not hard. Code :

HTML :

<p>Tags : </p><input type="text" name="irrelevant" id="tags" placeholder="add tag">

JavaScript(JS) :

var id=1;
function remove(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

function addTag(e,name) {
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    var entry=document.getElementById(name);
    entry.value=entry.value.toLowerCase();
    if (keyCode == '8' && entry.value.length==0) {
        if (entry.previousSibling.className=="btn btn-secondary margin") {
            entry.previousSibling.parentNode.removeChild(entry.previousSibling)
        }
        return;
    } 
    if (keyCode != '13' || !/[a-z]$/.test(entry.value) || document.getElementById(name+"_"+entry.value) != null) {
        return;
    }
    var id;
    var btn = document.createElement("button");
    var t = document.createTextNode(entry.value); 
    btn.appendChild(t);
    btn.setAttribute("id",name+"_"+entry.value)
    btn.className="btn btn-secondary margin"
    btn.setAttribute("onclick","remove('"+name+"_"+entry.value+"')")

    var insertedNode = entry.parentNode.insertBefore(btn, entry);
    entry.value=""
}
document.getElementById('tags').onkeypress=function(e) { addTag(e,"tags"); }

Basically, you are just checking whether keys are pressed and the entry is properly formatted, and accordingly adding tags, which are just buttons, before the entry. Only uses pure JS.