Question

我有一个Serveur实体的表单，其中我有一个动态部分：我可以添加尽可能多的typesDetails：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        //...
        ->add('typesDetails', 'collection', array(
            'type' => new LienServTypeDetailType(),
            'allow_add' => true,
            'allow_delete' => true))
    ;
}

在我看来有一些Javascript：

<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);

            $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>

这部分没问题。

但是在我的typesDetails表单中，我还需要javascript来根据另一个字段创建一个字段（我使用Symfony doc）：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('type')
    ;

    $formModifier = function (FormInterface $form, TypeServeur $type = null) {
        $details = null === $type ? array() : $type->getDetailTypes();

        $form->add('detailType', 'entity', array(
            'class' => 'MyBundle:DetailTypeServeur',
            'placeholder' => '-- Choisir un detail --',
            'required' => false,
            'choices' => $details,
        ));
    };

    $builder->addEventListener(
        FormEvents::PRE_SET_DATA,
        function (FormEvent $event) use($formModifier) {
            $data = $event->getData();
            if($data)
                $formModifier($event->getForm(), $data->getType());
        }
    );

    $builder->get('type')->addEventListener(
        FormEvents::POST_SUBMIT,
        function (FormEvent $event) use ($formModifier) {
            $zone = $event->getForm()->getData();
            $formModifier($event->getForm()->getParent(), $zone);
        }
    );
}

然后你假设在视图中添加Javascript，如下所示：

<script type="text/javascript">
    var $zone = $('#mybundle_serveur_typesDetails_4_type');
    $zone.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_4_detailType').replaceWith(
                    $(html).find('#mybundle_serveur_typesDetails_1_detailType')
                );
            }
        });
    });

</script>

在这个Javascript中，有一个'4'。这是一个测试（它实际上工作在div 4°^^），但这里'4'需要为我添加的每个typesDetails“动态”。例如：

    var $zone = $('#mybundle_serveur_typesDetails_1_type');
    var $zone = $('#mybundle_serveur_typesDetails_2_type');
    var $zone = $('#mybundle_serveur_typesDetails_3_type');
    var $zone = $('#mybundle_serveur_typesDetails_4_type');
    ...

我怎么想这样做？

动态表单和Javascript

0 个答案: