Help with "tagData"

[vfrari]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Hello guys!

I'm giving Tagify a little strange use.
In a form, to add new students, there is a field where some observations can be entered by the operator.

With the code below, I make the observations to be entered with the current date and the operator name.

cObs.getDispElem().tagify ({
  duplicates : true,
  maxTags : Infinity,
  delimiters : "\n|\r",
  transformTag : transformTag, 
  placeholder : "Observation...",
  editTags : true,
  pasteAsTags : true,
  backspace : false
});

// Generate colors
function getRandomColor() {
  function rand(min, max) {
    return min + Math.random() * (max - min);
  }

  var h = rand(1, 360) | 0,
  s = rand(40, 70) | 0,
  l = rand(65, 72) | 0;

  return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}

function transformTag(tagData) {
  tagData.color = getRandomColor();
  tagData.style = "--tag-bg:" + tagData.color;
  tagData.value = proxy.CurrDate + " | " + proxy.CurrUser + ": " + tagData.value; //CurrDate & CurrUser are PHP sessions 
}

It's working perfectly.

The problem is when I go back to the registry to edit it. In this case, all observations are updated with the same date and the same operator name.

How could I get around this problem?
I'm using it in jquery mode within PHPRunner.

Thanks!

[yairEO]

Hi! I need to see a simplified example on jsbin in order to be able to help.

Also, it might just be your backend or something in between which is modifying the tags data after they are created.

You can ask also in Stackoverflow

[vfrari]

Hi! I need to see a simplified example on jsbin in order to be able to help.

Also, it might just be your backend or something in between which is modifying the tags data after they are created.

You can ask also in Stackoverflow

Sorry, I can't reproduce the problem in jsbin since I'm using PHPRunner.
Thanks

[vfrari]

Hi! I need to see a simplified example on jsbin in order to be able to help.

Also, it might just be your backend or something in between which is modifying the tags data after they are created.

You can ask also in Stackoverflow

Could you tell me if the approach I used was the best to get this result?

[yairEO]

The code which you pasted has nothing to do with your problem, this isn't a problem related to Tagify but something else around the code which "feeds" tagify with the value. When does this issue happen?

"The problem is when I go back to the registry to edit it"

I don't even know what that means.... what is "registry", there's a million things in this sentence which are unexplained. I need exact steps or a video showing the situation with your voice explaining it to me step by step

But again, this feels to me like something completely unrelated to Tagify

[vfrari]

Thanksm yairEO! I will rephrase the question and provide more data.

[vfrari]

Hi, folks!

Returning to the subject, let me elaborate better.

I have a form to add a student. One of the fields is designated for notes that only managers and teachers can enter. I'm applying Tagify to it through jquery. This code tries to insert the notes by concatenating the current date and the name of the logged manager/professor to the tag value. In the ADD form it is working perfectly fine.

But, I have another form I use to editing the records (stored in MySql). When I return to the record via this form in order to change something, the stored tags duplicate current date and user name. If I add a new tag, it works fine, but the old ones look weird.

The same code is called in both forms:

cObs.getDispElem().tagify({
  duplicates: true,
  maxTags: Infinity,
  delimiters: "\n|\r",
  transformTag(tagData) { 
    tagData.color = getRandomColor();
    tagData.style = "--tag-bg:" + tagData.color;
    tagData.value = proxy.currDate + " | " + proxy.loggedUser + ": " + tagData.value;
  },
  placeholder: "Obs...",
  editTags: false,
  pasteAsTags: true,
  backspace: false
});

Any suggestion?

[yairEO]

Because you are calling transformTag again on an already transformed tag.

Try this approach:

cObs.getDispElem().tagify({
  duplicates: true,
  maxTags: Infinity,
  delimiters: "\n|\r",
  transformTag(tagData) { 
    tagData.color = getRandomColor();
    tagData.style = "--tag-bg:" + tagData.color;
    tagData.date = roxy.currDate;
    tagData.user = loggedUser;
  },
  placeholder: "Obs...",
  editTags: false,
  pasteAsTags: true,
  backspace: false,
  templates: {
    tag(tagData, tagify){
        var _s = this.settings;
        return `<tag title="${(tagData.title || tagData.value)}"
                    contenteditable='false'
                    spellcheck='false'
                    tabIndex="${_s.a11y.focusableTags ? 0 : -1}"
                    class="${_s.classNames.tag} ${tagData.class || ""}"
                    ${this.getAttributes(tagData)}>
            <x title='' class="${_s.classNames.tagX}" role='button' aria-label='remove tag'></x>
            <div>
                <span class="${_s.classNames.tagText}">${proxy.date} | ${proxy.user} : ${tagData[_s.tagTextProp] || tagData.value}</span>
            </div>
        </tag>`
    },
  }
})

[vfrari]

    tagData.date = roxy.currDate;
    tagData.user = loggedUser;

There was an error here ("proxy.currDate"), but now I get this:

[vfrari]

yairEO, just a thought.
Could I use "transformTag" in an ADD event?

.on('add'...) {
  transformTag(tagData) {...

That will solve my problem, because the tag value would only be changed in the act of adding a new one.

[yairEO]

transformTag already is called when a tag is added, I don't see how would your suggestion be different, and my solution which I gave you earlier is the correct one. You did not say why did it not work...

There should be no changing of the value anymore in your transformTag