asked on
Reinitialize or reload a dynamic Tagify element
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.
ASKER
ASKER
Open in new window
Or do you think it had more to do with me trying to reach the elements using jquery? Or maybe a little of both?
I mean, your calls to tagified look very much the same to my failed attempts.
I'm playing around with your fiddle. I'm walking your code to be sure i can understand your method. Looking at your code above, I can remove line 14. I was using the data element as an id/name. I use css classes sometimes, but when i find my pages getting noisy ill do this... prob not a great idea. just wanted to clarify because you made it a point to place values in it. Thank you for filling in my blanks.
And again, you nailed it, and thank you