How to refresh an Input field after changing its value with JQuery?

Question

I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.

The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).

I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.

Any ideas about this?

HTML:

<input id="tags_1" type="text" class="tags form-control" value="" />

AJAX/JQUERY:

var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');

$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();

Answer 1

Your id of the input is tags_1 but you are selecting it like #tags_1_tag . Why is that? I think maybe that could be the reason.

And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:

var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);