Bootstrap tagsinput add tag with id and value

Question

I am using Bootstrap Tags Input

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.

Tailwind

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. – Leathern

@Leathern Yes i tried this method too and got same error. – Tailwind

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. – Leathern

Sorry could you please elaborate bit more. – Tailwind

@Leathern check my answer if it is ok then make a vote for my answer. – Tailwind

Clarified question by improving grammar, words used and layout – Penology

Answer 1

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;

Tailwind

How to use this with typeahead ? Any ideas ? – Compaction

Answer 2

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

<input class="div-tag" />

Kimball

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. – Commutator

This simple change solved most of the problems I was encountering in my app. Thank you so much! – Burushaski

Answer 3

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.

Dicarlo

Please don't just post a link to some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself. – Truett

@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. – Dicarlo

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. – Ave

Answer 4

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"});
}

Jovian

Answer 5

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>

Groundnut