Bootstrap tag input not working with jquery

Question

I use Bootstrap tag input to create tags inside text input in the documentation:

Just add data-role = "tagsinput" to the input field, automatically change it to the tag input field.

But when using jquery before function :

$('#addrun').click(function () { $('#addrun').before('<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" />'); }); 

it displays like any text input with text inside and without tags.

any help?

Answer 1

Bootstrap starts when the page loads as a self-executing function. By adding a new element to the DOM - by then bootstrap-tagsinput.js will not know anything about it. Thus, you will have to initialize it after adding it to the DOM document using JavaScript.

To update input tags ( Boot tags in documents ):

 $('input').tagsinput('refresh'); 

So for you you need:

 /** * On <div id="addrun"> on click, * pre-apend it with an new Input * * Then refresh Bootstrap. **/ $('#addrun').click(function () { $('#addrun').before('<input type="text" ' + 'value="Amsterdam,Washington,Sydney,Beijing" '+ 'data-role="tagsinput" />'); //Now run bootstrap.js to re-search //new data-* elements $('input').tagsinput('refresh'); }); 

Hope this helps! Despite the fact that above $('input') update each <input> in the entire document, so instead of the more preferred <input> you can use the .class or #ID class for faster access =)

Update:

Since koala_dev mentioned correctly in the comments, you probably won't need to initialize it with $('selector').tagsinput('refresh') , but simply:

  $('#selecor').tagsinput(); 

.tagsinput('refresh') will usually be executed at the input of .tagsinput() , which is already initialized with the new parameters.

Answer 2

I did this by working as follows. He showed the problem $ (..). Taginput () was not found, and now I can update tags with new values.

I deleted the first and last line from the bootstrap-tagsinput.js file, i.e. '(function ($) {' and '})(window.jQuery)' .

And the two lines below are called where the tags should be displayed and updated.

 $("input[data-role=tagsinput]").tagsinput('removeAll'); $("input[data-role=tagsinput]").tagsinput('add', 'New Value');