asked on
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
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
TRUSTED BY
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