Symfony 5 selecte dynamique après un selecte dynamique

Salut tous le monde,

Tout d'abord merci beaucoup pour votre temps.

Je suis actuellement entrain de créer un formulaire qui dynamiquement lors de la sélection sur une liste déroulante (Categorie::Class), met à jour la liste suivante (Marque::Class), qui à la suite met encore à jour la liste suivante (Modele:Class).

Ce qui fonctionne donc actuellement :

- la mise à jour de la liste (Marque::Class) après la sélection sur la liste (Categorie::Class).

Le problème maintenant est que lors de la sélection sur la liste (Marque::Class), la liste suivante (Modele::Class) ne se met pas à jour alors que la requête ajax s'exécute bien avec l'id de la marque, je pense donc que le soucis est dans le fichier du formulaire (Estimation.type)

pour plus de détails, voici ci-joint mes différents fichiers de codes utilisées pour mon besoin :

code HomeController

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
class HomeController extends AbstractController
{
 #[Route('estimation', name: 'estimation')]
    public function estimation(Request $request, EstimationRepository $estimationRepository, CategorieRepository $categoryRepository, MarqueRepository 
     $marqueRepository): Response
    {
        $estimation = new Estimation;
 
        $estimationForm = $this->createForm(EstimationType::class, $estimation);
 
        $estimationForm->handleRequest($request);
 
        if ($estimationForm->isSubmitted() && $estimationForm->isValid()) {
            $estimationRepository->save($estimation, true);
 
            $this->addFlash('success', 'estimation envoyé avec succès');
            return $this->redirectToRoute('site_home');
        }
        return $this->render('home/v_estimation.html.twig', [
                'estimationForm' => $estimationForm->createView()
        ]);
    }
}

EstimationType

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
class EstimationType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('categorie', EntityType::class, [
                'class' => Categorie::class,
                'placeholder' => 'selection categorie',
                'choice_label' => 'libelle',
            ])
            ->add('marque')
            ->add('modele')
        ;
 
 
        //prepare formModifier by selector
        $formModifierCategorie = function (FormInterface $form, Categorie $categorie = null) {
            $marques = null === $categorie ? [] : $categorie->getMarques();
 
            $form->add('marque', EntityType::class, [
                'class' => Marque::class,
                'placeholder' => 'selection marque',
                'choices' => $marques,
                'choice_label' => 'libelle',
                'disabled' => $categorie === null,
            ]);
        };
        $formModifierMarque = function (FormInterface $form, Marque $marque = null) {
            $modeles = null === $marque ? [] : $marque->getModeles();
 
            $form->add('modele', EntityType::class, [
                'class' => Modele::class,
                'placeholder' => 'selection modele',
                'choices' => $modeles,
                'choice_label' => 'libelle',
                'disabled' => $marque === null,
            ]);
        };
 
        //prepare addEventListener preparation by selector
        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($formModifierCategorie, $formModifierMarque) {
                // this would be your entity, i.e. SportMeetup
                $data = $event->getData();
 
                $formModifierCategorie($event->getForm(), $data->getCategorie());
                $formModifierMarque($event->getForm(), $data->getMarque());
            }
        );
 
        //prepare addEventListener by selector
        $builder->get('categorie')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifierCategorie) {
                // It's important here to fetch $event->getForm()->getData(), as
                // $event->getData() will get you the client data (that is, the ID)
                $categorie = $event->getForm()->getData();
 
                // since we've added the listener to the child, we'll have to pass on
                // the parent to the callback function!
                $formModifierCategorie($event->getForm()->getParent(), $categorie);
            }
        );
 
        $builder->get('marque')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifierMarque) {
                // It's important here to fetch $event->getForm()->getData(), as
                // $event->getData() will get you the client data (that is, the ID)
                $marque = $event->getForm()->getData();
 
                // since we've added the listener to the child, we'll have to pass on
                // the parent to the callback function!
                $formModifierMarque($event->getForm()->getParent(), $marque);
            }
        );
    }
 
 
 
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => Estimation::class,
        ]);
    }
}

v_estimation.html.twig

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
{% extends 'l_home.html.twig' %}
 
{% block title %}sellitandco - estimation{% endblock %}
 
{% block view %}
    <section class="container">
        <div class="row">
            {{ form_start(estimationForm) }}
            {{ form_widget(estimationForm) }}    {# <select id="meetup_sport" ... #}
 
            <button type="submit" class="btn btn-primary">send</button>
            {{ form_end(estimationForm) }}
        </div>
    </section>
{% endblock %}
 
{% block javascripts %}
    <script>
        //dynamique selector categorie
        var $categorie = $('#estimation_categorie');
        // When sport gets selected ...
        $categorie.change(function() {
            // ... retrieve the corresponding form.
            var $form = $(this).closest('form');
            // Simulate form data, but only include the selected sport value.
            var data = {};
            data[$categorie.attr('name')] = $categorie.val();
            // Submit data via AJAX to the form's action path.
            $.ajax({
                url : $form.attr('action'),
                type: $form.attr('method'),
                data : data,
                complete: function(html) {
                    // Replace current position field ...
                    console.log($(html.responseText).find('#estimation_marque'));
                    $('#estimation_marque').replaceWith(
                        // ... with the returned one from the AJAX response.
                        $(html.responseText).find('#estimation_marque')
                    );
 
                    marqueModifier();
                    // Position field now displays the appropriate positions.
 
                }
            });
        });
 
        function marqueModifier(){
            //dynamique selector marque
            var $marque = $('#estimation_marque');
            // When sport gets selected ...
            $marque.change(function() {
                console.log("marque change");
                // ... retrieve the corresponding form.
                var $form = $(this).closest('form');
                // Simulate form data, but only include the selected sport value.
                var data = {};
                data[$marque.attr('name')] = $marque.val();
 
                // Submit data via AJAX to the form's action path.
 
                $.ajax({
                    url : $form.attr('action'),
                    type: $form.attr('method'),
                    data : data,
                    complete: function(html) {
                        console.log($marque.val());
                        console.log($(html.responseText));
                        // Replace current position field ...
                        $('#estimation_modele').replaceWith(
                            // ... with the returned one from the AJAX response.
                            $(html.responseText).find('#estimation_modele')
                        );
 
 
                        // Position field now displays the appropriate positions.
                    }
                });
            });
        }
    </script>
{% endblock %}

Je ne comprend pas pourquoi ma liste modele ne se met pas à jour alors que la requête ajax s'effectue belle et bien sans erreur avec le bon paramètre, j'ai donc du mal comprendre l'algorithme de EstimatonType.

Merci beaucoup pour votre aide :)