Link to home
Start Free TrialLog in
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.

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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




don't use jQuery as you don't get the instance if I can remember...
Again... thank you very much.
you welcome!