formCreateTrick.html.twig

{% extends 'base.html.twig' %}


{% block body %}
    <div class="container-fluid">
        <div class="row well">

            <div class="col-md-8 col-md-offset-2">
                {{ form_start(form) }}


                    <div class="form-group">

                        {{  form_label(form.nom, "Nom du trick") }}
                        {{ form_widget(form.nom, {'attr': {'class': 'form-control'}}) }}

                        {{  form_label(form.description, "Description") }}
                        {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}

                        {{ form_row(form.groupe) }}
                        <a href="#" id="add_groupe" class="btn btn-default">Ajouter une
                            catégorie</a>

                        {{ form_widget(form.save, {'attr': {'class': 'btn btn-primary'}}) }}

                    </div>

                {# On charge la bibliothèque jQuery. Ici, je la prends depuis le CDN google
                    mais si vous l'avez en local, changez simplement l'adresse. #}
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <!-- <script src="../public/jquery-3.2.1.js"></script> -->

                {# Voici le script en question : #}
                <script type="text/javascript">
                    $(document).ready(function() {
                        // On récupère la balise div en question qui contient l'attribut
                        // « data-prototype » qui nous intéresse.
                        var $container = $('div#tricks_groupe');

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

                        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
                        $('#add_groupe').click(function (e) {
                            addGroupe($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) {
                            addGroupe($container);
                        } else {
                            // S'il existe déjà des catégories, on ajoute un lien de suppression // pour chacune d'entre elles
                            $container.children('div').each(function () {
                                addDeleteLink($(this));
                            });
                        }

                        // La fonction qui ajoute un formulaire CategoryType
                        function addGroupe($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
                            var template = $container.attr('data-prototype')
                                .replace(/__libelle__label__/g, 'Groupe n°' + (index + 1))
                                .replace(/__libelle__/g, index);

                            // On crée un objet jquery qui contient ce template
                            var $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);

                            // 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
                            var $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</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;
                            });
                        }
                    });
                </script>




                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}