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?

Inwrap

Hello, can you please share the solution for this case as I have the exact case, thanks in advance. – Perceval

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.

Cuspid

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.

Cilicia

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;

Xylograph

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=""

Stokeontrent

Answer 5

From de documentation of tagsinput: This is only possible when using string as tags. When itemValue option is set, this option will be ignored.

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Papua

Answer 6

I also faced this issue I resolved this issue by following this procedure.

1. The initialization should be proper and in my case the mistake was, I tried number of times initialization of tag.

2. Only once initialize n use it

Won't initialize it again, I discovered that main problem is to repeating same code again.

I am sharing my code here

            
$('select#myId').tagsinput({
					  itemValue: 'value',
					  itemText: 'text',
					  tagClass: function(item) {
						    return ((item.removeDis && item.removeDis==true)  ? 'default-tag' : 'label-info');
						  }
				 });
         
  	$('select#myId').tagsinput('add',{
							'value' : somevalue,
							'text' : sometext,
							'removeDis' : true
						});
					 
		
        

<select required class="form-control" id="myId"
					name="myId" multiple></select>
        

Illa

Answer 7

Remove the 'data-role="tagsinput"' and use like below

      <input type="text" id="galleryTag" />'
      <script>
      var ele = $('#galleryTag');
      ele.tagsinput({
      allowDuplicates: false,
      itemValue: 'value',
      itemText: 'text'
         });
      ele.tagsinput('add',{ "value":1,"text":"Amsterdam"});
      ele.tagsinput('add',{ "value":4,"text":"Washington"});
      ele.tagsinput('add',{ "value":7,"text":"Sydney");
    </script>

Epner

dont remove data-role else it will throw error Can't add objects when itemValue option is not set – Illa

Answer 8

Remove data-role from element.ieremove this part data-role="tagsinput"

Angelus

by removing data-role it is throwing error. Can't add objects when itemValue option is not set – Illa

Answer 9

ok, so I figure this out I think. you must remove the data-role="tagsinput" when calling

$('.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
});

I think this creates a conflict. so remove the data-role from the input and then use the tag as in Joe's answer.

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

Murielmurielle

-1 because it'd be more useful if you showed how to remove data-role="tagsinput" since that is the solution you are suggesting. – Overlive

I was going to help. Was* – Murielmurielle