I have aproblem with tagify. When I remove a tag (using tag cross), visually the tag is removed from the text area but then it is passed as a parameter via ajax. For example, if I have the following text:
Vito hello
and Vito is a tag, if I delete it, visually only hello remains but still if I send the text taking the text area via jquery still it considers me the text Vito hello.
What is the problem?
EDIT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BigMouth v1.0</title>
<script src="../jquery.min.js"></script>
<link rel="stylesheet" href="../jquery-ui.min.css">
<script src="../jquery-ui.min.js"></script>
<script src="../tagify"></script>
<script src="../tagify.polyfills.min.js"></script>
<link href="../tagify.css" rel="stylesheet" type="text/css" />
<script src="../bootstrap.js"></script>
<link rel="stylesheet" href="../bootstrap.css">
<script>
function ShareData(){
let datepicker = document.getElementById("datepicker").value;
let oggetto = document.getElementById("oggetto").value;
let descrizione = document.getElementById("descrizione").value;
// list_added_people is a global variable
const ids = list_added_people.map(o => o.id)
// remove duplicates
const filtered = list_added_people.filter(({ id }, index) => !ids.includes(id, index + 1))
let json_form = { 'date': datepicker, 'oggetto': oggetto, 'descrizione': descrizione, 'people': filtered };
ipcRenderer.send('insert_event', JSON.stringify(json_form));
}
</script>
</head>
<body>
<div id="messages"></div>
<div style="display: none;" id="id_people"></div>
<div class="container">
<form id="myForm" action="#">
<div class="row">
<div class="row" id="title_area">
<h1>Inserisci evento:</h1>
</div>
<div class="row" id="date_area">
<div class="col">
<p>Data: <input type="text" id="datepicker"></p>
</div>
</div>
<div class="row" id="object_area">
<div class="col">
<p>Oggetto: <input type="text" id="oggetto" style=" width:50%"></p>
</div>
</div>
<div class="row" id="description_area">
<div class="col">
<p>Descrizione:</p>
<textarea id = "descrizione" name='mix'></textarea>
</div>
</div>
<div class="row" id="buttons_area">
<div class="col-xs-3">
<button type="button" class="btn btn-dark btn-block">Salva</button>
</div>
<div class="col-xs-3">
<button type="button" id = "prova" class="btn btn-danger btn-block">Cancella</button>
</div>
</div>
<button onclick="ShareData()">ShareData</button>
</div>
</form>
</div>
</div>
<style>
#date_area{
margin-top: 30px;
margin-bottom: 10px;
}
#object_area{
margin-top: 30px;
margin-bottom: 10px;
}
#description_area{
margin-top: 50px;
margin-bottom: 10px;
}
#buttons_area{
margin-top: 30px;
margin-bottom: 10px;
}
.delete_btn_area{
margin-left: 30px;
}
</style>
<script>
Array.prototype.containsArray = function (val) {
var hash = {};
for (var i = 0; i < this.length; i++) {
hash[this[i]] = i;
}
return hash.hasOwnProperty(val);
}
$(document).ready(function(){
var whitelist_1;
list_added_people = []
// AGGIUNGE LE PERSONE SALVATE IN DB NEL TAGGIFY
ipcRenderer.send('get_people', "ciao backend");
window.api.receivePeople((data) => {
let people = JSON.parse(data)
for(i in people){
whitelist_1.push({ value: people[i]['id'], text: people[i]['name'] + " " + people[i]['surname'], title: people[i]['name'] + " " + people[i]['surname'] })
}
})
$( function() {
$( "#datepicker" ).datepicker();
});
// Define two types of whitelists, each used for the dropdown suggestions menu,
// depending on the prefix pattern typed (@/#). See settings below.
var whitelist_1 = [
{ value: 100, text: 'kenny', title: 'Kenny McCormick' },
{ value: 1000, text: 'Mr. Mackey', title: "M'Kay" }
]
// Second whitelist, which is shown only when starting to type "#".
// Thiw whitelist is the most simple one possible.
whitelist_2 = ['Homer simpson', 'Marge simpson', 'Bart', 'Lisa', 'Maggie', 'Mr. Burns', 'Ned', 'Milhouse', 'Moe'];
// initialize Tagify
var input = document.querySelector('[name=mix]'),
// init Tagify script on the above inputs
tagify = new Tagify(input, {
// mixTagsInterpolator: ["{{", "}}"],
mode: 'mix', // <-- Enable mixed-content
pattern: /@|#/, // <-- Text starting with @ or # (if single, String can be used here)
tagTextProp: 'text', // <-- the default property (from whitelist item) for the text to be rendered in a tag element.
// Array for initial interpolation, which allows only these tags to be used
whitelist: whitelist_1.concat(whitelist_2).map(function(item){
return typeof item == 'string' ? {value:item} : item
}),
dropdown : {
enabled: 1,
position: 'text', // <-- render the suggestions list next to the typed text ("caret")
mapValueTo: 'text', // <-- similar to above "tagTextProp" setting, but for the dropdown items
highlightFirst: true // automatically highlights first sugegstion item in the dropdown
},
duplicates: true,
callbacks: {
add: console.log, // callback when adding a tag
remove: console.log // callback when removing a tag
}
})
// A good place to pull server suggestion list accoring to the prefix/value
tagify.on('input', function(e){
var prefix = e.detail.prefix;
// first, clean the whitlist array, because the below code, while not, might be async,
// therefore it should be up to you to decide WHEN to render the suggestions dropdown
// tagify.settings.whitelist.length = 0;
if( prefix ){
if( prefix == '@' )
tagify.whitelist = whitelist_1;
if( prefix == '#' )
tagify.whitelist = whitelist_2;
if( e.detail.value.length > 1 )
tagify.dropdown.show(e.detail.value);
}
console.log( tagify.value )
console.log('mix-mode "input" event value: ', e.detail)
})
tagify.on('add', function(e){
let name = e.detail.data.text
let id = e.detail.data.value
console.log(list_added_people)
var flag = 0
list_added_people.push({ id: id, title: name })
})
tagify.on('remove', function(e){
let id_deleted_person = e.detail.data.value
console.log("---")
console.log(e)
console.log(list_added_people)
var keyToFind = id_deleted_person;
var person_to_delete = -1;
for (var i in list_added_people) {
if (list_added_people[i].id == keyToFind) {
person_to_delete = i
break; // If you want to break out of the loop once you've found a match
}
}
if (person_to_delete != -1) {
list_added_people.splice(person_to_delete, 1)
console.log(list_added_people)
}
//list_added_people = list_added_people.filter(e => e !== id_deleted_person)
})
})
</script>
</body>
</html>