Avatar of Keith Westberg
Keith Westberg

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="" />

Open in new window


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
         }
   });
});

Open in new window


Javascript version


document.querySelectorAll(".cust").forEach(node => {
   new Tagify(node, {
      delimiters: ",",
      editTags: false,
         dropdown: {
            enabled: 0,
            maxItems: 5
         },
   });
 });

Open in new window


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);
});

Open in new window


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...

Open in new window


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.

jQueryJavaScript* Tagify

Avatar of undefined
Last Comment
leakim971
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Keith Westberg
Keith Westberg

ASKER

Just wow... you nailed it.  Before I close this out, are you telling me what i was missing was the initial empty object?

let tagified = [];

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




Avatar of leakim971
leakim971
Flag of Guadeloupe image

don't use jQuery as you don't get the instance if I can remember...
Avatar of Keith Westberg

ASKER

Again... thank you very much.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

you welcome!
JavaScript
JavaScript

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.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo