Bootstrap tagsinput add tag with id and value

Question

I am trying to add tags dynamically.

$('.div-tag').tagsinput('add', 'vino');

The above code works fine, but when I try the following code:

$('.div-tag').tagsinput('add', { id: 1, text: 'some tag' });

I get the error:

Uncaught Can't add objects when itemValue option is not set

Please help me to add tag with id and value.

Have you tried *setting* the *itemValue* field? Like $('.div-tag').tagsinput('add', { id: 1, itemValue: 'some tag' }); This is how I would interpret the docs at first glance. — alexander.biskop, Apr 17 '15 at 15:46
@alexander.biskop Yes i tried this method too and got same error. — Manish Shukla, Apr 17 '15 at 15:48
Ah, it seems like this is correct when *adding* items: $('input').tagsinput('add', { id: 1, text: 'some tag' }); However, you have to specify *itemValue* when you are creating the tags input field like so: $('input').tagsinput({ itemValue: 'id' }); EDIT: I'm referring to the "Options" sections of the docs. — alexander.biskop, Apr 17 '15 at 15:53
@alexander.biskop check my answer if it is ok then make a vote for my answer. — Manish Shukla, Apr 17 '15 at 16:21
Clarified question by improving grammar, words used and layout — Totem, Apr 20 '15 at 20:24

score 17 · Accepted Answer · answered Apr 17 '15 at 16:11

17

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;

answered Apr 17 '15 at 16:11

Manish Shukla

1,305
2
8
21

1

How to use this with typeahead ? Any ideas ? – Rushikesh Gomekar Feb 18 '16 at 05:11

score 13 · Answer 2 · answered Jun 09 '15 at 21:10

13

I spent few hours to find out, that above working only when data-role="tagsinput" is removed from your

<input class="div-tag" />

answered Jun 09 '15 at 21:10

Artemis909

149
1
6

1

This appeared to solve the problem as tags are now loaded into the input field but when adding new tags, they are not recognised as tags. Seems data-role is required. – PhoebeB Aug 10 '15 at 16:50
This simple change solved most of the problems I was encountering in my app. Thank you so much! – joelcollyer Jan 06 '16 at 16:59

sivann · Answer 3 · 2017-08-09T10:42:44.103

6

This library is broken, don't bother. The accepted answer doesn't work on version 0.8. After 1h of trying several things, I suggest to switch to another library, I used tagEditor , where everything worked on the 1st try.

edited Aug 09 '17 at 10:42

answered May 02 '17 at 11:35

sivann

1,920
3
25
40

1

Please don't just post a link to some tool or library as an answer. At least demonstrate [how it solves the problem](http://meta.stackoverflow.com/a/251605) in the answer itself. – Baum mit Augen May 02 '17 at 22:17
3

@BaummitAugen: I'm not suggesting some other lib, I'm suggesting not to use this one, as it is broken. It is. I could remove the specific recommendation, but I think it helps. It would have helped me. Including a demo from the other lib would be out of scope. – sivann May 03 '17 at 07:56
Even I think the library is broken. When you try to add tags later after initialization, it won't add the first tag, but the following tags I am trying to add. (At least in my case). Further, after you add those tags the tags editor seems to become reset, as in properties such as `freeInput` I have set to `false` during initialization, doesn't seem to work anymore. – Romeo Sierra Dec 04 '18 at 06:52

score 1 · Answer 4 · answered Mar 27 '18 at 11:38

There is nothing wrong with the library, but when you get this error it means there is a problem with the method initilization.

Try to do it when the page is ready like so:

$(document).ready(function(){
   $('#myInput').tagsinput({
       allowDuplicates: false,
       itemValue: 'id',
       itemText: 'label'
    });
});

$(".someButton").click(function(){
   $('#myInput').tagsinput('add', {id:1, label:"blah blah"});
}

score -4 · Answer 5 · edited Dec 08 '15 at 12:56

-4

Please try like this:

<div data-src="<?php echo get_template_directory_uri(); ?>/images/index_slide01.jpg">
    <div class="fadeIn camera_caption">
        <h2 class="text_1 color_1">Solutions that you need!</h2>
        <a class="btn_1" href="#">More info</a>
    </div>
</div>

edited Dec 08 '15 at 12:56

Parixit

3,710
3
35
57

answered Dec 08 '15 at 11:55

Md. Bozlur Rosid Shagor

1

Bootstrap tagsinput add tag with id and value

5 Answers5

Linked