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
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
$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 = $('Supprimer'); let $deleteLink = $(''); // 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; }); } }