Bootstrap tagsinput Can't add objects when itemValue option is not set

Question

I've seen this question Bootstrap tagsinput add tag with id and value, but the solution is not working for me:

What I'm finding is that in order to get the input box recognising tags that I type in, I either have to have data-role = tagsinput OR call $("input").tagsinput().

eg. This works for recognising tags with no data-role:

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

But this does not:

$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

However, if I want to add items via javascript then it will only work if I neither have data-role nor have an initial call. The error is Can't add objects when itemValue option is not set

eg. this works but now it doesn't recognise tags:

$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

but this does not but now it recognises tags again:

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

There must surely be a way of BOTH being able to recognise tags and add items?

Answer 1

I was getting the same issue ("itemValue not set") and checked the plugin and it seems the parameter 'options' in the constructor for the tagsinput is not being set even if you initialize it.

/**
   * Constructor function
   */
  function TagsInput(element, options) {

What I did was put a random string next to the data-role definition in the tag like so, to force it to have that value in the options parameter:

<input type="text" id="mytags" value="" data-role="tagsinput sometext" />

Then did this:

var mytagsinput = $('#mytags');

//initialize
 mytagsinput.tagsinput({
              itemValue: 'id',
                itemText: 'text',
            });

//add my tags object
 mytagsinput.tagsinput('add', { id: 1, text: 'mytext'});   

And it worked for me.

Answer 2

I found another workaround.

Search the string "Can't add objects when itemValue option is not set" into the tagsinput.js file. You will find it inside the add function of the plugin:

// Throw an error when trying to add an object while the itemValue option was not set
  if (typeof item === "object" && !self.objectItems){
    throw("Can't add objects when itemValue option is not set");
  }

I just force the item to be from object to string:

// Throw an error when trying to add an object while the itemValue option was not set
  if (typeof item === "object" && !self.objectItems){
    //throw("Can't add objects when itemValue option is not set");
    item = $.trim(item.name);
  }

This seems to perfectly work :). Hope this help.

Answer 3

initialize tags input like

 $('.div-tag').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });

To add dynamic tag

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });

That's it;

Answer 4

You can just delete data-role in your input tag. It will init before your javascript which has real options.

<input type="text" id="mytags" value=""