Form Ajax et event

**keitaro_bzh** · 23/05/2017, 10h23

Bonjour à tous,

J'avais débuté il y a quelques mois un début d'appli en php/js sans framework, mais, à force de lire des tuto par ci par la parlant des Frameworks, j'ai franchi le cap.
Je suis donc en train d'apprendre le framework symfony afin de réaliser une petite appli php en interne au boulot.

Après quelques manips, il est vrai que c'est bien foutu et que l'on gagne en lisibilité et en temps. Par contre, je tombe sur un os. Je sens que je ne suis pas loin, mais y'a des choses qui m'échappent et j'aurais besoin d'un œil avisé et d'une explication plus clair car je ne trouve pas la réponse à mon problème (qui est tout simple j'en suis sur). Tout cela se passe du coté du formulaire et de la génération automatique d'un select à partir d'un autre select. Je me suis basé sur la doc dispo à l'adresse http://symfony.com/doc/current/form/...submitted-data, ainsi qu'une multitude de forums qui me ramène à chaque fois à cette page.

Donc, dans un premier temps, j'ai trois entity:

Enseigne
Magasin
Visite

Mon entity Magasin est lié à mon Enseigne en ManyToOne, et mon entity Visite est lié à mon Magasin en ManyToOne également. Je passe le code qui est issu de la génération d'une entity de la console symfony.
J'ai créé dans mon MagasinRepository une fonction qui me permet de lister mes magains par enseigne (getMagasinParEnseigne). Cela fonctionne bien pour cette partie

Je veux créer un formulaire Visite dans lequel je veux sélectionner une enseigne, qui filtrera automatique les magasins de l'enseigne. Je n'ai pas intégré de lien entre les visites et les enseignes car, je peux l'obtenir via le lien vers le magasin. Donc, j'ai vu qu'il fallait rajouter l'option mapped à false et cela fonctionne bien.

Donc, je passe par la fonction symfony de création de formulaire que je modifie ensuite et dont voici le code de la fonction BuildForm:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
	       	->add('dateVisite', DateTimeType::class)
	       	->add('Enseigne', EntityType::class, array(
	        			'class'        => 'BRSuivicommercialBundle:Enseigne',
	        			'choice_label' => 'enseigne',
	        			'multiple'     => false,
	        			'mapped' => false
        	))
	       	->add('commentaire', TextareaType::class);
 
		$formModifier = function (FormInterface $form, Enseigne $enseigne = null) {
			$magasins = null === $enseigne ? array() : $enseigne->getMagasin();
 
			$form->add('Magasin', EntityType::class, array(
				'class'       => 'BRSuivicommercialBundle:Magasin',
				'placeholder' => '',
				'choices'     => $magasins,
			));
		};
 
       	$builder->addEventListener(
       		FormEvents::PRE_SET_DATA,
       		function (FormEvent $event) use ($formModifier) {
       			$data = $event->getData();
       			$formModifier($event->getForm(), $data->getMagasin());
      		}
       	);
 
       	$builder->addEventListener(
			FormEvents::POST_SUBMIT,
			function (FormEvent $event) use ($formModifier) {
				$enseigne  = $event->getForm()->getData();
				$formModifier($event->getForm()->getParent(), $enseigne);
			}
		);
    }

Dans mon formulaire en twig, je n'ai pas fait de mise en forme spécifique pour le moment. j'ai simplement ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<h1>{{ titre }}</h1>
 
  	{{ form(form) }}
 
 
    <script type="text/JavaScript">
	$(function () {
		jQuery(document).ready(function() {
			console.log("jQuery est prêt !");
 
    		$("#br_suivicommercialbundle_visite_Enseigne").change(function() {
				mafonctionchange('Magasin','Enseigne');
			}).trigger('change');
 
			function mafonctionchange(selecteur,selecteurparent) 
			{
				$.ajax({				
					url: '{{ path('br_suivicommercial_visites_add')}}', 
					type: 'POST', 
					data:
						{
							idEnseigne : $("select#br_suivicommercialbundle_visite_"+selecteurparent+" option:selected").val(),
							select : selecteur
						},
					dataType: 'data',
					success: function(html) {
						$('#br_suivicommercialbundle_visite_'+selecteur).replaceWith( 
								$(html).find('#br_suivicommercialbundle_visite_'+selecteur)
						); 
					},
					error: function() {
						console.log('error'); 
					}
				});
			}
		});
	});
 
    </script>

Enfin, voici l'extrait de mon controller:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
public function visiteEditAction(Request $request, $id = null)
    {
    	$visite = new Visite();
 
    	$form = $this->createForm(VisiteType::class, $visite);
    	$form->handleRequest($request);
    	if ($form->isSubmitted() && $form->isValid()) {
    		// ... save the meetup, redirect etc.
    	}
 
		return $this->render(
			'BRSuivicommercialBundle:Visites:_ajout.html.twig',
			array('form' => $form->createView(),
				'titre' => 'test'	
			)
		);
}

Le chargement du formulaire se fait bien, cependant, je n'ai aucun magasin qui apparaît suite à ce code. J'ai réussi à la faire apparaître auparavant sans malheureusement pouvoir les filtrer. Je peux sélectionner les enseignes mais aucun changement n'apparait dans mon formulaire. Pourtant, j'ai bien mon script qui tourne car j'ai le message 'error' qui apparaît dans ma console.

Je suis en train de tourner dingue après tous les essais effectués. Je sens que le code qui ne va pas est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$formModifier = function (FormInterface $form, Enseigne $enseigne = null) {
	$magasins = null === $enseigne ? array() : $enseigne->getMagasinParEnseigne($enseigne);

Je n'arrive pas à voir à quel moment je récupère mes infos de mon formulaire, ainsi qu'à l'endroit ou il est transmis

Si une ame bienveillante pouvait m'aiguiller et m'expliquer, je lui en serai reconnaissant.

Merci

**Nico_F** · 23/05/2017, 11h20

Hello,

En dehors du fait qu'il manque une accolade et un point virgule sur le dernier bout de code (qui sont peut-être un oubli au moment du post sur le forum ou la raison de ton problème), il serait intéressant de commencer à comprendre pourquoi tu es envoyé dans la partie error de ton ajax. Pour ça peux-tu nous dire ce qui t'es retourné lorsque tu accèdes à l'URL que tu passes à ton ajax de manière classique ?

Une erreur 500 ou une exception pourrait provoquer une erreur silencieuse puisqu'à l'intérieur de ton ajax tu serais redirigé vers la partie error sans afficher de gros message d'erreur.

La debug toolbar devrait te donner l'état de ta requête AJAX et te permettre d'y accéder de manière "PAS AJAX".

**keitaro_bzh** · 23/05/2017, 11h38

Hi,

Merci pour ton aide. Pour les accolades, en effet, j'ai juste fait un copié/coller du code plus haut donc bien présent dans mon code, mais tu fais bien de le souligner car cela m'est arrivé à plusieurs reprises

Concernant la debug toolbar, en effet, j'avais une erreur 500 que j'ai réussi à résoudre. La j'ai un "
Method

OST HTTP Status 200 IP 192.168.15.172 Profiled on Tue, 23 May 2017 11:23:13 +0200 Token 292774

Par contre, j'ai encore du mal avec cette barre, car il y a énormément d'info et je m'y perds. Peux-tu m'aiguiller sur le suivi de l'Ajax via cette toolbar?

**keitaro_bzh** · 23/05/2017, 13h04

Je progresse, j'ai réussi à appeler ma fonction repository et à afficher les magasins filtrés via un ID en dur dans mon VisiteType ('6' au lieu de mon $data->getMagasin()).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$builder->addEventListener(
	FormEvents::PRE_SET_DATA,
	function (FormEvent $event) use ($formModifier) {
        	$data = $event->getData();
		$formModifier($event->getForm(), '6');
	}
);

Donc, déjà un problème de compris. J'envoyais une entité Magasin, alors que j'avais besoin d'une entité Enseigne. Donc, je simplifie en passant simplement l'ID en paramètre pour le moment.

Il me reste à savoir comment récupérer cet ID ou bien l'enseigne directement depuis mon formulaire. C'est le but du addEventListener si j'ai bien compris qui va surveiller les actions sur le formulaire (corrigez moi si je me trompe).

En me basant sur l'exemple du site symfony, les données sont récupérées via la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$data = $event->getData();

. Puis ensuite par un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$data->getMagasin()

. Or, moi je veux mon enseigne, mais la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$data->getEnseigne();

n'existe pas dans mon entity Visite puisque je n'ai pas lié les deux... J'ai tenté un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$event->getForm()->getEnseigne()

mais bien sur, cela ne marche pas, ça aurait été trop beau...

Comment puis-je récupérer cette entité ou cet id qui finalement correspond à mon idEnseigne envoyé par ajax (et correct dans la debug toolbar)?

**Nico_F** · 23/05/2017, 14h51

Si tu as besoin de manipuler des data qui ne sont pas mappés dans le data_class de ton form, tu ne peux pas ls récupérer depuis ton $data effectivement.

Par contre tu peux dumper cette variable pour voir si elle contient l'enseigne quelque part.

Si ce n'est pas le cas, je ne peux que te suggérer d'utiliser une class FormModel à part plutôt que de mapper ton form directement sur l'entité : ça te permettra d'y mettre tous les attributs et les getters que tu souhaites sans polluer ton entité.

Concernant les explications de la debug toolbar, je ne connais pas celle de la version 3.x donc je ne peux que t'inviter à consulter la doc

**keitaro_bzh** · 23/05/2017, 15h25

mais je récupère bien mon formulaire quand je fais un(?):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$form = $event->getForm()

J'ai trouvé cette syntaxe dans la doc qui me permet d'accéder à un champ non mappé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$form->get('Enseigne')->getData();

J'ai essayé de le mettre et je n'ai pas d'erreur, mais par contre, il me renvoie rien, car à priori, le champ est null car ma liste est vide.
Ou alors, il ne récupère pas la valeur de mon champ select

**keitaro_bzh** · 02/06/2017, 08h55

Je désespère.... Impossible de récupérer la valeur de mon select dans mon entity pour pouvoir filtrer le champs à afficher... Comme de nombreuses personnes sur Internet, j'ai abandonné les events... Dommage, car cela semblait économique en code...

Du coup, je suis repassé à une analyse de ma valeur dans mon contrelleur avec un renvoi de ma liste d'entité en JSON et une constitution de mon champ en jQuery.. C'est plus long certes, mais ça fonctionne bien.

PS: je laisse le ticket ouvert si dès fois quelqu'un saurait me dire s'il a réussi à récupérer la valeur d'un select coté twig dans son EntityType et le gérer la MAJ avec les events comme préconisé dans la doc..

Form Ajax et event

Symfony PHP

Discussions similaires

Partager

Partager