Option action d'un formulaire ignorée depuis le controller

Version imprimable

Bonjour à tous

Comme dit dans le titre, l'action de mon form est ignorée lorsque renseignée dynamiquement depuis le controller.

Le formulaire en question étant injecté dans une modale en Ajax...

Tout marche parfaitement si je le code en dur dans le twig du formulaire mais justement j'ai besoin que l'action puisse être modifiée depuis le code de façon à me resservir du même formulaire.

J'ai essayé en envoyant le path en tant que variable aussi depuis le controller dans le tableau d'options du render, le path est bien visible dans l'inspecteur mais n'est pas correctement interprété.

J'ai lu sur plusieurs forums que la méthode décrite (et appliquée dans mon cas) sur le site officiel symfony ne marchait pas et de ce que je vois personne n'a de solution...

Je précise que je ne peux non plus le renseigner en dur en tant qu'attribut du form dans Twig car cela retirerait toute dynamique...

Merci d'avance de m'indiquer quoi faire si vous avez déjà été confrontés à cette problématique.

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
    #[Route('/{elementId}/ajouter-question/', '_ajouter_question')]
    public function addQuestion($elementId, Request $request, EntityManagerInterface $em, QuizzesElementsRepository $quizzesElementsRepo): Response
    {
        $element = $quizzesElementsRepo->find($elementId);
        $quizz = $element->getQuizz();
        $formTitle = "Ajouter une question";
 
        $question = new Questions();
 
        $form = $this->createForm(QuestionsType::class, $question, [
            'action' => $this->generateUrl(
                'app_quizzes_questions_reponses_ajouter_question',
                [
                    'elementId' => $element->getId(),
                ]
            ),
        ]);
 
        $form->handleRequest($request);
 
        if ($form->isSubmitted() && $form->isValid()) {
 
            $question->setQuizzElement($element);
 
            $em->persist($question);
            $em->flush();
 
            if ($form->get('saveAndAdd')->isClicked()) {
                $this->addFlash('success', "La nouvelle question a bien été enregistrée dans la base");
                return $this->redirectToRoute('app_quizzes_questions_answers_ajouter_question', ['quizzId' => $quizz->getId(), 'elementId' => $elementId, 'message' => "La nouvelle question a bien été enregistrée dans la base"]);
            }
 
            if ($form->get('saveAndClose')->isClicked()) {
                $this->addFlash('success', "La nouvelle question a bien été enregistrée dans la base");
 
                return $this->redirectToRoute('app_quizzes_modifier', ['quizzId' => $quizz->getId()]);
            }
 
            //$this->addFlash('success', "La nouvelle question a bien été enregistrée dans la base.");
            // return $this->redirectToRoute('app_quizzes_modifier', ['quizzId' => $quizz->getId()]);
        }
        if ($request->isXmlHttpRequest()) {
            return new JsonResponse(['content' => $this->renderView('quizzes/questions-form.html.twig', ['form' => $form, 'formTitle' => $formTitle, 'quizzId' => $quizz->getId(), 'elementId' => $elementId])]);
        } else {
            return new JsonResponse("La requête n'a pu s'effectuer car elle n'est pas de type Ajax", 400);
        }
    }

18/02/2025, 13h52
Bisûnûrs

Hello,

Sans plus d'informations, de code, on ne pourra sans doute rien pour toi. Je viens de tester de mon côté avec un formulaire basique, l'option "action" est bien prise en compte. Donc il y a quelque chose dans ton code (ailleurs que ce que tu nous montres) qui interfère.

Merci d'avoir répondu

Je rajoute quelques détails :

Ce formulaire est injecté dans une modale qui elle même se trouve en tant qu'include dans mon base.html.twig...

Il n'y a aucun problème de code et le data s'enregistre bien lorsque l'action est précisée en dur, par contre, l'action quand injectée depuis le controller n'apparaît pas dans l'inspecteur, l'enregistrement ne s'effectue donc pas... J'utilise pourtant la méthode préconisée par la doc de Symfony...

J'ai donc quelque chose de bloquant qui annule l'injection de l'action (malgré l'utilisation de $this->generateUrl()

Y aurait il une configuration à faire dans le config.yaml ou autre ?

Voici le code du Formulaire en 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
 
{% block body %}
	<main>
		<form method="post">
			<h1 class="titre">{{formTitle}}</h1>
 
			{{ form_start(form) }}
			<div class="input-group">
				{{ form_row(form.categorie) }}
			</div>
			<div class="input-group">
				{{ form_row(form.question) }}
			</div>
			<div class="form-row">
				{{ form_row(form.saveAndAdd,{'attr':{'class':'btn'}}) }}
				{{ form_row(form.saveAndClose,{'attr':{'class':'btn'}}) }}
			</div>
			{{ form_end(form) }}
		</form>
	</main>
	{% block stylesheets %}
		<link rel="stylesheet" href="{{asset('assets/css/form.css')}}">
	{% endblock %}
{% endblock %}

main.js(traitement des modales)

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
//Traitement des modales
const btnOpenModal = document.querySelectorAll(".btn-open-modal");
const modal = document.querySelector(".modal");
const modalTitle = document.querySelector(".modal .modal-title");
 
const btnClose = document.querySelector(".modal .close");
 
//Ouverture de la modale
btnOpenModal.forEach((el) => {
  el.addEventListener("click", (e) => {
    e.preventDefault();
    modal.style.display = "flex";
    modal.classList.remove("modalSlideOut");
 
    //Url du controller
    const url = e.target.dataset.url;
    //Id de l'élément de quizz
    const elementId = e.target.dataset.elementid;
    //id du quizz actif
    const quizzId = e.target.dataset.quizzid;
    //titre de la modale si renseigné
    const modalTitleText = e.target.dataset.modaltitle;
    console.log(modalTitleText);
 
    const modalBody = document.querySelector(".modal .modal-body");
 
    // const formData = new FormData();
    // formData.append("elementId", elementId);
    // formData.append("quizzId", quizzId);
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          method: "GET",
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
          },
        });
 
        if (response.ok) {
          const data = await response.json();
 
          modalBody.innerHTML = "";
          modalBody.insertAdjacentHTML("afterbegin", data.content);
          modalTitle.innerHTML = modalTitleText;
          //
        } else {
          //
          if (response.status === 404) throw new Error("404, Not found");
          if (response.status === 500)
            throw new Error("500, internal server error");
          throw new Error(response.status);
        }
      } catch (error) {
        console.error("Fetch", error);
      }
    };
    fetchData();
  });
});
 
//Fermeture de la modale
btnClose.addEventListener("click", () => {  
  modal.classList.add("modalSlideOut");
  setTimeout(() => {
    modal.style.display = "none";
  }, 500);
});

18/02/2025, 14h59
Bisûnûrs

Je vois dans ton code Twig que tu mets en dur la balise <form> ... </form> alors que c'est ce que fait également le code {{ form_start(form) }} ... {{ form_end(form) }}.

Du coup le form envoyé n'est pas celui généré par Twig mais celui que tu as mis en dur, et de celui-là l'action n'est jamais modifiée.
18/02/2025, 15h07
clickandgo

Merci mille fois Bisûnûrs !

Et le pire dans cette histoire c'est qu'au même moment que tu répondais j'avais justement un doute précisément à ce sujet ! :)