Multiple 'createTag' error on Tag-It jquery plugin

Question

I am using the tag-it jquery plugin from https://github.com/aehlke/tag-it

var ip_elem = $('#my-tags');

ip_elem.tagit({
    removeConfirmation: false,
    caseSensitive: false,
    allowDuplicates: false,
    allowSpaces: true,
    readOnly: false,
    tagLimit: null,
    singleField: false,
    singleFieldDelimiter: ',',
    singleFieldNode: null,
    tabIndex: null,
    placeholderText:"Enter Tags"
});

Now, I want to programmatically add more tags using the createTag method.

var newTags = ["javascript","php","ruby","python"];

for(var k=0;k<newTags.length;k++){
    ip_elem.tagit("createTag", newTags[k]);
}

It displays the first tag in the input, but for the second tag says : Uncaught Error: cannot call methods on tagit prior to initialization; attempted to call method 'createTag'. It stops and doesn't add any more tags in the input box now. So, in the end, only the first tag is formed (which in this case would be javascript)

What is going wrong here?

Answer 1

Take a look at this example i've created in Fiddle:

In the Fiddle example, it will dynamically create the tags onload and if you try and enter a tag with the same name, it won't let you add it.

Hope this will help you out, it's got events to show you what actually happening on the page.

var newTags = ["javascript","php","ruby","python"];

var addEvent = function(text) {
    $('#events_container').append(text + '<br>');
};

$(function(){
    var ip_elem = $('#myTags');

    ip_elem.tagit({
        removeConfirmation: false,
        caseSensitive: false,
        allowDuplicates: false,
        allowSpaces: true,
        readOnly: false,
        tagLimit: null,
        singleField: false,
        singleFieldDelimiter: ',',
        singleFieldNode: null,
        tabIndex: null,
        placeholderText:"Enter Tags"
    });

    ip_elem.tagit({
        availableTags: newTags,
        beforeTagAdded: function(evt, ui) {
            if (!ui.duringInitialization) {
                addEvent('Before Tag Added: ' + ip_elem.tagit('tagLabel', ui.tag));
            }
        },
        afterTagAdded: function(evt, ui) {
            if (!ui.duringInitialization) {
                addEvent('After Tag Added: ' + ip_elem.tagit('tagLabel', ui.tag));
            }
        },
        beforeTagRemoved: function(evt, ui) {
            addEvent('Before Tag Removed: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        afterTagRemoved: function(evt, ui) {
            addEvent('After Tag Removed: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        onTagClicked: function(evt, ui) {
            addEvent('On Tag Clicked: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        onTagExists: function(evt, ui) {
            addEvent('On Tag Exists: ' + ip_elem.tagit('tagLabel', ui.existingTag));
        }
    });   

    for(var k=0;k<newTags.length;k++)
    {
        ip_elem.tagit("createTag", newTags[k]);
    }
});

JSFIDDLE EXAMPLE