Bonjour,

j'aimerais pouvoir ajouter un "événement" (Je connais pas exactement les termes ^^') .change() sur des divs crée dynamiquement (aussi en utilisant Ajax).

Je m'explique, je suis sur Symfony. Dans un formulaire, j'ai une collection. Je peux donc ajouter/supprimer un formulaire imbriqué.

J'ai fait ça en suivant la doc Symfony :

    <script type="text/javascript">
        $(document).ready(function() {
            var $container = $('div#mybundle_serveur_typesDetails');
            var $addLink = $('<a href="#" id="add_type" class="">Ajouter un type</a>');
            $container.append($addLink);
            $addLink.click(function(e) {
                addSource($container);
                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });

            var index = $container.find(':input').length;

            if (index == 0) {
                addSource($container);
            } else {
                $container.children('div').each(function() {
                    addDeleteLink($(this));
                });
            }

            function addSource($container) {
                var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'type n°' + (index+1))
                    .replace(/__name__/g, index));



                addDeleteLink($prototype);

                $prototype.change(function () {
                    var $form = $(this).closest('form');

                    var data = {};
                    data[$zone.attr('name')] = $zone.val();

                    $.ajax({
                        url: $form.attr('action'),
                        type: $form.attr('method'),
                        data: data,
                        success: function(html) {

                            
                            $('#mybundle_serveur_typesDetails_'+(index+1)+'_detailType').replaceWith(
                                $(html).find('#mybundle_serveur_typesDetails_'+(index+1)+'_detailType')
                            );
                        }
                    });
                });

                $container.append($prototype);


                index++;
            }

            function addDeleteLink($prototype) {
               $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');

                $prototype.append($deleteLink);

                $deleteLink.click(function(e) {
                    $prototype.remove();
                    e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                    return false;
                });
            }
        });
    </script>

Donc ajouter/supprimer ça marche.

Mais à l'intérieur de la/les div ajoutée(s), je souhaite aussi utiliser de l'Ajax.

Car dans le formulaire imbriqué il y a 2 select, dont 1 qui dépend du précédent.

Comment est-ce que vous procéderiez ?

Je ne demande pas l'Ajax pour gérer les deux select, ça je sais faire.

Mais comment récupérer la div sur laquelle je souhaite ajouter l'événement change() ?

(dans mon cas, l'id des divs sur lesquels je souhaite ajouter change() sont : mybundle_serveur_typesDetails_1_type avec 1,2,3...)

Merci d'avance !

-
Edité par Punt 21 juillet 2017 à 13:40:20