I have an mvc view which generates dynamic text inputs, based on the number of records needing to be edited.
<input asp-for="@Model[i].CUSTOM_TAG" class="cust" type="text" data-custom="" />
Each text input is put through the Tagify process, to make them all Tagified.
Jquery version
var cust = $(".cust");
jQuery.each(cust, function (i, val) {
var tagify = new Tagify(cust[i], {
delimiters: ",",
editTags: false,
dropdown: {
enabled: 0,
maxItems: 5
}
});
});
Javascript version
document.querySelectorAll(".cust").forEach(node => {
new Tagify(node, {
delimiters: ",",
editTags: false,
dropdown: {
enabled: 0,
maxItems: 5
},
});
});
Both versions work as expected. Except I have a use case where if we have many text inputs that require the same values, the user should only need to enter them once. So I wired the first text input row to include a button that copies the values in this first text input into all following text inputs.
$(".copy_cust").click(function () {
var parent = $(".first");
var val = parent.children("*[data-custom]").val();
$("*[data-custom]").val(val);
});
This also works as expected. If I placed AAA and BBB in the first input, the first and all following inputs now have "[{"value":"AAA"},{"value":"BBB"}]". The first has the Tagified values that look like tags: [ AAA ] [ BBB ].
But all other inputs have nothing visible. If I f12 and view the elements, I can see the copied values are there for all inputs. But I cannot for the life of me figure out how to get Tagify to render the new input values. I posted a help comment with the developer and his response was the following:
“Tagify has no notion you updated the value of the input tags programmatically. You need to run tagify.loadOriginalValues() where tagify is a variable referencing new Tagify for each of your tagified inputs. This will rebuild the tags to match the value.”
And here is where I'm stumped. I have tried everything I can think of to reach each instance of a tagified input with zero luck.
var child = $("*[data-custom]");
var tag = $(child[1]).tagify();
var tag = Tagify(child[1]);
etc...
I have tried so many variations, I can’t even recall them all. I get either
“tagify is not a function”
“this element is already a tagified element”
‘undefined”
If you can steer me in the right direction, that would be amazing. =]
Thank you in advance.
Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.