films-symfony-4-2/assets/js/collectiontypeadd.js

function requete(chemin, nomDuDiv, nomDuBouton) {
    $.ajax({
        url: chemin,
        type: 'POST',
        dataType: 'json',
        success: function (reponse) {
            let reponseArray = parseJson(reponse);
            collections(reponseArray, nomDuDiv, nomDuBouton);
        }
    })
}

function parseJson(data) {
    let tableau = [];
    for (let i = 0; i < data.length; i++) {
        let UnObjetJson = data[i];
        let obj = JSON.parse(UnObjetJson);
        sortie = Object.values(obj)
        tableau.push(sortie[0]);
    }
    return tableau;
}

function collections (reponse, nomDuDiv, nomDuBouton) {

    // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
    let $container = $('div#'+nomDuDiv);

    // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
    let index = $container.find(':input').length;

    // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
    $('#'+nomDuBouton).click(function(e) {
        addConteneur($container);

        e.preventDefault(); // évite qu'un # apparaisse dans l'URL
        return false;
    });

    // On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).
    if (index == 0) {
    } else {
        // S'il existe déjà des catégories, on ajoute un lien de suppression pour chacune d'entre elles
        $container.children('fieldset').each(function() {
            $container.find(':input').prop("readonly",  true);
            $container.find(':input').autocomplete({
                source: reponse
            });

            addDeleteLink($(this));
        });
    }

    // La fonction qui ajoute un formulaire RealisateurType
    function addConteneur($container) {
        // Dans le contenu de l'attribut « data-prototype », on remplace :
        // - le texte "__name__label__" qu'il contient par le label du champ
        // - le texte "__name__" qu'il contient par le numéro du champ
        let template = $container.attr('data-prototype')
            .replace(/__name__label__/g, '')
            .replace(/__name__/g,        index)
        ;

        // On crée un objet jquery qui contient ce template
        let $prototype = $(template);

        // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
        addDeleteLink($prototype);

        // On ajoute le prototype modifié à la fin de la balise <div>
        $container.append($prototype);
        $container.find(':input').autocomplete({
            source: reponse
        });

        // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
        index++;
    }

    // La fonction qui ajoute un lien de suppression d'une catégorie
    function addDeleteLink($prototype) {
        // Création du lien
        //let $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');
        let $deleteLink = $('<a href="#"><i class="fa fa-trash fa-lg" style="color:Tomato;"></i></a>');

        // Ajout du lien
        $prototype.append($deleteLink);

        // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
        $deleteLink.click(function(e) {
            $prototype.remove();

            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });
    }
}