Tagify: Replacetag is not working properly when multiple tag added at same time

[Hardikraja]

Hi Tagify team,
I am using tagify in my project and it's awesome with its features. I am using tagify and ajax also...
So here it's steps that what I am doing..

First of all, when there is a new tag added, onAddTag() function will be called, that will do ajax call to my application and then it'll get boolean value from there and then as per boolean value, I am concatenating with the value of the tag.

Here it's the function of onAddTag() which is called on add event.

function onAddTag(e) {
    console.log("tag added--------------");
    console.log("onAddTag: ", e.detail);
    console.log("original input value: ", e.detail.data.text);
    allAddedVisitors = allAddedVisitors +'__'+e.detail.data.text;
    var selected = [];
    var sel = "-1";
    $('#visitors :selected').each(function () {
        selected[$(this).val()] = $(this).text();
        sel = sel + "," + $(this).val();
    });
    selected[e.detail.data.text] = e.detail.data.value;
    sel = sel + "," + e.detail.data.text;
    console.log(selected);
    $.ajax({
        type:"GET",
        url : BASE_URL + "/screening/scanIt/"+e.detail.data.text,
        success:function (data) {
            var symbol ="";
            if(data===true){
                symbol = "🚩";
            }
            else {
                symbol="🏁";
            }
            tagify.on('click',onClickFun);
            console.log(tagify.getTagElms()[e.detail.index]);
            console.log("________"+tagify.getTagElms()[e.detail.index]);
            console.log(new Date().getTime());
                tagify.replaceTag(tagify.getTagElms()[e.detail.index],({
                    text: e.detail.data.text,
                    title: e.detail.data.value,
                    value: e.detail.data.value + symbol
                }));

        }
    });
    $('#visitors').val(sel.split(","));


    if ($("#visitors :selected").length > 0) {
        $(".visitortags").addClass("visitor-placeholder");
    } else {
        console.log('error');
        $(".visitortags").removeClass("visitor-placeholder");
    }
    if ($("#visitors :selected").length > 1) {
        $(".visitors-group").slideDown();
    } else {
        $(".visitors-group").slideUp();
    }
}

and It's also working good, but there is one scenario when multiple tags added automatically by my code, and this function called for every tag at the same time, so that the replace tag only works for one tag only which comes first, and it's not replacing for other tags. so what's the problem can you please guide me..? why replace tag is not working?

I hope you will respond ASAP.

Thanks,
Hardik.

[yairEO]

Hi! thank you for liking my component. There's no team here, just myself :)

Can you please explain the scenario which causes the bug more clearly?

1. You add multiple tags programatically
2. You make an AJAX call for each tag - why?
3. You call replaceTag for each previous AJAX call success method. why?

I need to understand why you are doing these things in order to help

[Hardikraja]

Yes, YairEO
Thanks for responding very fast.
So here answers your question,

(1) Yes, I am adding multiple tags at the same time, this scenario comes because I am using one modal to fill up the form from the user, If the user enters some data then the form will reopen and tags which have added will automatically be added again at the same time. so this function onAddTag() will be called for that each tag.

(2) yes, I do AJAX calls for each tag because, when the user selects tag I am sending the Id of that particular entity which is in the tag to my database, through ajax call where I am again calling another third party API, and based on that API result which always comes in a boolean value, I am putting this flag after the value of each tag. That's why I am doing ajax call for each tag.

(3) and the replacetag I am using to concatenate the flag with the value of that tag. because I didn't find any method for edit value from a programming way.

Thanks, YairEO,
Hardik.

[yairEO]

I've made an example for you using mostly CSS to put those flags after some AJAX call has been made, per-tag:

https://jsbin.com/pamakac/edit?html,css,js,output

Tell me if that's useful for you

[Hardikraja]

Yes, It's working perfectly.

Thanks, YairEO. Superb.