Symfony 4 - Dynamic Generation for Submitted Forms with Select2 - symfony

Question

I'm following the tutorial at http://symfony.com/doc/current/form/dynamic_form_modification.html#dynamic-generation-for-submitted-forms
I managed to reproduce the tutorial without worries, everything works well. However, when I apply "Select2" on my fields, it does not work anymore.
Form :
class TicketAdminForm extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('Client', EntityType::class, [
'class' => Clients::class,
'choice_label' => 'name',
'label' => "Client",
'placeholder' => '',
'attr' => ['data-provider' => 'select2'],
])
;
$formModifier = function (FormInterface $form, Clients $client = null) {
$entity = null === $client ? [] : $client->getEntities();
$form->add('entity', EntityType::class, [
'class' => 'App\Entity\Entity',
'placeholder' => '',
'choices' => $entity,
'label' => 'Entité',
'attr' => ['data-provider' => 'select2'],
]);
};
$builder->addEventListener(
FormEvents::PRE_SET_DATA,
function (FormEvent $event) use ($formModifier) {
// this would be your entity, i.e. Clients
$data = $event->getData();
$form = $event->getForm();
$formModifier($event->getForm(), $data->getClient());
}
);
$builder->get('Client')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formModifier) {
// It's important here to fetch $event->getForm()->getData(), as
// $event->getData() will get you the client data (that is, the ID)
$client = $event->getForm()->getData();
// since we've added the listener to the child, we'll have to pass on
// the parent to the callback functions!
$formModifier($event->getForm()->getParent(), $client);
}
);
}
Twig :
{{ form_start(form, {'attr': {'class': 'form-horizontal'} }) }}
<div class="box-body">
{{ form_row(form.client) }}
{{ form_errors(form.client) }}
{{ form_row(form.entity) }}
{{ form_errors(form.entity) }}
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="col-md-offset-2 col-sm-8">
<button id="dropbutton" class="btn bg-ticketing btn-flat form-control" type="submit">
{{ 'Submit the ticket'|trans({}, 'TicketingBundle') }}
</button>
</div>
</div>
<!-- /.box-footer -->
{{ form_end(form) }}
</div>
<script>
var $client = $('#ticket_admin_form_client');
// When client gets selected ...
$client.change(function() {
console.log('dans change');
// ... retrieve the corresponding form.
var $form = $(this).closest('form');
// Simulate form data, but only include the selected client value.
var data = {};
data[$client.attr('name')] = $client.val();
// Submit data via AJAX to the form's action path.
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
// Replace current entity field ...
$('#ticket_admin_form_entity').replaceWith(
// ... with the returned one from the AJAX response.
$(html).find('#ticket_admin_form_entity')
);
// Entity field now displays the appropriate entities.
}
});
});
</script>
This code only works if I remove 'attr' => ['data-provider' => 'select2'] in form.
I tried :
$('#ticket_admin_form_client').on("select2:selecting", function(e) {
console.log('test');
});
but it does not work.
Do you have a solution to make it work with select2?

Answer 1

It's simple, in your ajax method add this :
$('#ticket_admin_form_entity').select2({});
Like this in method success by this :
// ...
$.ajax({
// ...
success: function(html) {
$('#ticket_admin_form_entity').replaceWith(
$(html).find('#ticket_admin_form_entity')
);
$('#ticket_admin_form_entity').select2({}); // Add this
}
// ...
;)