removeTag with JQuery seems not working

dimmat commented 5 years ago

I am using Bootstrap 3.0, JQuery and Tagify. Although your documentation is good, I cannot find examples for some of tagify's methods and events. For example, I just want to remove the item that has value "a" from my list with JQuery. My code is:

<!DOCTYPE html>
<html lang="el">

<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="js/tagify/tagify.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="<?php echo $siteurl; ?>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo $siteurl; ?>/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo $siteurl; ?>/js/tagify/jQuery.tagify.min.js"></script>    
</head>

<body>

<div class="container">
    <h1>Test page</h1>

    <div class="row">
        <div class="col-md-12">
            <input id="txtMyList" value="">
        </div>
    </div>

    <div class="row" style="margin-top:10px;"><div class="col-md-12"></div></div>    

    <div class="row">
        <div class="col-md-12">
            <button id="btnRemove" type="button" class="btn btn-primary">Remove item with value -a-</button>
        </div>
    </div>

</body>

</html>

<script>
$(document).ready(function() 
{ 
    var x = $('#txtMyList').tagify({
        pattern: null,   
        delimiters: ',|',
        keepInvalidTags: false,
        callbacks: {},
        addTagOnBlur: true,
        duplicates: false,
        whitelist: [],
        blacklist: [],
        enforceWhitelist: false
    });

    $('#btnRemove').on('click', function()
    {
        alert('Button was pressed!'); 
        x.tagify().data('tagify').removeTag('a');   // Remove item with value 'a'
    });
}); 
</script>

Where is the problem? I've done somthing similar with addTags() (after several hours of experimentation) and it worked, removeTag() seems not to working.

yairEO commented 5 years ago

You should do:

var tagify = new Tagify($('#txtMyList')[0], 
    {
        pattern: null,   
        delimiters: ',|',
        keepInvalidTags: false,
        callbacks: {},
        addTagOnBlur: true,
        duplicates: false,
        whitelist: [],
        blacklist: [],
        enforceWhitelist: false
    }
);

tagify.on('remove', onRemoveTag)

function onRemoveTag(){
  ...
}

But I don't understand what exactly do you want. Why was an item with a value which is unwanted a part of the whitelist setting in the first place?

dimmat commented 5 years ago

As I said before, I am using the JQuery version of Tagify. Correct me if I am wrong but the on.('remove',..) method is executed only when an item is removed from the list. I do not want something like this. I want a certain value (e.g. value 'a' in my example) to be removed when I press a button. I also don't want to use the white list. The value that I want to remove has entered dynamically in the list so I am trying to remove it if it has not a "special format" of mine thus it can not be in the black or white list. According to your documentation, I have to use the removeTag() and I do not know how to do it with JQuery. Could you be more specific? Thank you.

yairEO commented 5 years ago

I do not encourage to use the jQuery version of Tagify. You should use it as my previous example.

jQuery has nothing to do with the question.

If you want to validate all the tags by pressing some custom button of yours and remove specific ones, then simply use:

tagify.removeTag('a')

Note that this will only remove the first occurrence of the tag with that value.

You can also invoke removeTag with a tag element, if you happen to have a reference to a certain tag DOM element.

dimmat commented 5 years ago

I skipped the JQuery version of Tagify (JQuery.tagify.min.js) and tried to use the plain-javascript version (tagify.min.js). I also tried to implement all other suggenstions. My code now is:

<!DOCTYPE html>
<html lang="el">

<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="js/tagify/tagify.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/tagify/tagify.min.js"></script>    
</head>

<body>

<div class="container">
    <h1>Test page</h1>

    <div class="row">
        <div class="col-md-12">
            <input id="txtMyList" value="">
        </div>
    </div>

    <div class="row" style="margin-top:10px;"><div class="col-md-12"></div></div>    

    <div class="row">
        <div class="col-md-12">
            <button id="btnRemove" type="button" class="btn btn-primary">Remove item with value -a-</button>
        </div>
    </div>

</body>

</html>

<script>
$(document).ready(function() 
{ 
    var tagify = new Tagify($('#txtMyList')[0], 
    {
        pattern: null,   
        delimiters: ',|',
        keepInvalidTags: false,
        callbacks: {},
        addTagOnBlur: true,
        duplicates: false,
        whitelist: [],
        blacklist: [],
        enforceWhitelist: false
    });

    $('#btnRemove').on('click', function()
    {
        alert('Button was pressed!');  
        tagify.removeTag('a'); // Remove item with value 'a' if it is on the list
    });

}); 
</script>

Please revise again the removeTag funtion, it seems that it is not working. Thank you.

yairEO commented 4 years ago

Please see https://github.com/yairEO/tagify/issues/222

yairEO / tagify

removeTag with JQuery seems not working #199