troubleshooting Question

Reinitialize or reload a dynamic Tagify element

Avatar of Keith Westberg
Keith Westberg asked on
jQueryJavaScript* Tagify
5 Comments1 Solution11 ViewsLast Modified:

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.

ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 5 Comments.
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

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

Mike

Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 5 Comments.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004