Vue formUpdateTrick

<div class="container-fluid">
        <div class="row well">
            <div class="form-group col-md-8">


            {{ form_start(form) }}

            <h3>Modifier le nom:</h3>
            {{ form_widget(form.nom, {'attr': {'class': 'form-control'}}) }}

            <h3>Modifier la description:</h3>
            <p id="description">{{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}</p>

            {# Afficher les images
            <div class="row">
                <div class="col-sm-6 text-center">

                    {%  for updateTrick in updateTrick.image %}
                        <img src="{{ asset('/public/uploads/images/' ~ updateTrick.url) }}" alt="{{ updateTrick.alt }}" height="auto" width="600px">
                    {% endfor %}
                </div>
            </div>


             Afficher les vidéos
            <div class="well">
                <div class="row">
                    {%  for trick in updateTrick.video %}
                        <div style='height :300px ;width :300px'>
                            {{ trick.video() | raw }}
                        </div>
                    {% endfor %}
                </div>
            </div>
#}

            <div class="well">
                {{ form_row(form.video) }}
                <a href="#" id="add_video" class="btn btn-default">Ajouter une vidéo</a>
            </div>


            {# JQuery pour ajouter les boutons vidéos #}
            <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#trick_update_video');

                    // 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_video').click(function(e) {
                        addVideo($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) {
                        addVideo($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 addVideo($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(/__name__label__/g, 'Catégorie n°' + (index+1))
                            .replace(/__name__/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>


                <div class="well">
                    {{ form_row(form.image) }}
                    <a href="#" id="add_image" class="btn btn-default">Ajouter une image</a>
                </div>


                {# JQuery pour ajouter les boutons images #}
                <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#trick_update_image');

                        // 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_image').click(function(e) {
                            addImage($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) {
                            addImage($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 addImage($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(/__name__label__/g, 'Catégorie n°' + (index+1))
                                .replace(/__name__/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>





            <button type="submit" class="btn btn-primary">Modifier</button>

            {{ form_end(form) }}

            </div>
        </div>
    </div>