Symfony2.6: créez un formulaire ajax dynamique pour remplir dynamiquement la liste déroulante

Je travaille sur une forme dynamique Symfony, avec Ajax . J'essaie de remplir la liste déroulante de manière dynamique, c'est-à-dire que je souhaite afficher les résultats dans la seconde, sélectionnez les résultats parmi les premiers. Et le même pour mon troisième choix. En effet, le premier menu déroulant permet aux utilisateurs de choisir un parc, lorsqu'ils choisissent un parc, le second choix est rempli avec les résultats de Ensembles.php appartiennent au parc, puis les utilisateurs peuvent choisir dans le troisième menu déroulant un batiments appartenant à Ensembles.php . C'est un exemple

Ce formulaire s'affiche lorsque je souhaite ajouter une Zonestechnique. Voici la relation entre mes entités:

Parcsimmobilier.php <= ManyToOne Ensembles.php <= ManyToOne Batiments.php <= ManyToOne Zonestechnique.php

C'est ma forme ZonestechniqueType.php :

 use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolverInterface; use Doctrine\ORM\ParcsimmobilierRepository; use Doctrine\ORM\EnsemblesRepository; use Doctrine\ORM\BatimentsRepository; class ZonestechniqueType extends AbstractType { /* @param FormBuilderInterface $builder * @param array $options */ public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('parcsimmobilier', 'entity', array( 'mapped' => false, 'class' => 'MySpaceDatabaseBundle:Parcsimmobilier', 'property' => 'nom', 'empty_value' => '-- choose a parc parc --', 'label' => 'choose a parc immobilier : ', 'multiple' => false, )) ->add('ensembles', 'entity', array( 'mapped' => false, 'multiple' => false, 'class' => 'MySpaceDatabaseBundle:Ensembles', 'property' => 'nom', 'empty_value' => '-- choose an ensemble --', 'label' => 'choose an ensemble : ', )) ->add('batiments','entity', array( 'class' => 'MySpaceDatabaseBundle:Batiments', 'property' => 'nom', 'empty_value' => '-- choose a batiment --', 'label' => 'choose a batiment : ', )) ->add('categorieszonestechnique') ->add('nom') ->add('localisation') ->add('commentaire') ; } /** * @param OptionsResolverInterface $resolver */ public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => 'MySpace\DatabaseBundle\Entity\Zonestechnique' )); } /** * @return string */ public function getName() { return 'mySpace_databasebundle_zonestechnique'; } }

J'ai créé deux méthodes dans mon contrôleur. Un pour afficher / ajouter une Zonestechnique, et un autre pour remplir ma liste déroulante avec Ajax. Pour l'instant, j'essaie avec les deux premiers choix, c'est-à-dire que je choisis un parc, puis la deuxième liste déroulante est remplie du nom de tous les ensembles appartenant au parc que j'ai choisi.

Voici ma méthode de contrôleur :

 public function formZonesAction() { $request = $this->getRequest(); $em = $this->getDoctrine()->getEntityManager(); if($request->isXmlHttpRequest()) { $id = ''; $id = $request->get('id'); if ($id != '') { $ensembles = $em->getRepository('MySpaceDatabaseBundle:Ensembles') ->getEnsemblesByParcsimmobilierQueryBuilder($id); $tabEnsembles = array(); $i = 0; foreach($ensembles as $ensemble) { $tabEnsembles[$i]['id'] = $ensemble->getId(); $tabEnsembles[$i]['nom'] = $ensemble->getNom(); $i++; } $response = new Response(); $data = json_encode($tabEnsembles); // formater le résultat de la requête en json $response->headers->set('Content-Type', 'application/json'); $response->setContent($data); return $response; } } else { return new Response('no ajax'); } } /** * * @Route("/gestionzonestechniquesconformites/addform", name="formZones") * @Method("GET") */ public function addZonesConformitesAction() { $em=$this->getDoctrine()->getManager(); $zones = $em->getRepository('MySpaceDatabaseBundle:Zonestechnique'); $zones = new Zonestechnique; $form=$this->createForm(new ZonestechniqueType(), $zones); $request = $this->getRequest(); if($request->isMethod('POST') | $form->isValid()) { $form->bind($request); $zoneConformite = $form->getData(); $em->persist($zones); $em->flush(); return $this->redirect($this->generateUrl('indexRechercheZones')); } else { return $this->render('MySpaceGestionEquipementsTechniquesBundle:ZonesTechnique:addZonesTechniqueConformites.html.twig', array('form' => $form->createView(), 'zone' => $zones )); } }

C'est le dépôt de EnsemblesRepository.php :

 class EnsemblesRepository extends EntityRepository { public function getEnsemblesByParcsimmobilierQueryBuilder($id) { return $this ->createQueryBuilder('e') ->where('e.parcsimmobilier = :parcsimmobilier') ->setParameter('id', $id); ; } }

Vous pouvez trouver cette demande dans mon contrôleur pour la méthode Ajax.

Je n'ai aucune erreur lorsque j'existe le formulaire / la page, mais ma requête Ajax ne fonctionne pas. C'est mon fichier de routage:

 addZonesConformites: path: /gestionzonestechniquesconformites/add defaults: { _controller: MySpaceGestionEquipementsTechniquesBundle:GestionZonesTechniques:addZonesConformites } requirements: methods: GET # Ajax formZones: pattern: /gestionzonestechniquesconformites/addform defaults: { _controller: MySpaceGestionEquipementsTechniquesBundle:GestionZonesTechniques:formZones } requirements: methods: GET addZonesConformites_process: path: /gestionzonestechniquesconformites/add/process defaults: { _controller: MySpaceGestionEquipementsTechniquesBundle:GestionZonesTechniques:addZonesConformites } requirements: methods: POST

Comme vous pouvez le voir, j'ai 3 routes, une pour afficher le formulaire, une pour remplir avec Ajax le menu déroulant et la dernière pour valider le formulaire.

Bien sûr, dans ma brindille, j'ai fait cette forme:

  <form action="{{ path('addZonesConformites_process') }}" method="POST"> <div class="row"> <div class="col-md-6"> <div> {{ form_errors(form) }} </div> <div> {{ form_label(form.parcsimmobilier, "choisir un parc", {'label_attr': {'class': 'control-label'}}) }} {{ form_errors(form.parcsimmobilier) }} {{ form_widget(form.parcsimmobilier, {'attr': {'class': 'form-control', 'id': 'parcsimmobilier', 'onChange':'populateEnsembles();'}}) }} </div> <div> {{ form_label(form.ensembles, "choisir un ensemble:", {'label_attr': {'class': 'control-label'}}) }} {{ form_errors(form.ensembles) }} {{ form_widget(form.ensembles, {'attr': {'class': 'form-control', 'id': 'ensembles'}}) }} </div> <div> {{ form_label(form.batiments, "Appartenant au bâtiment:", {'label_attr': {'class': 'control-label'}}) }} {{ form_errors(form.batiments) }} {{ form_widget(form.batiments, {'attr': {'class': 'form-control'}}) }} </div> <div class="row"> <div class="clo-md-4"></div> <input onclick="clear_form_elements(this.form)" type="reset" value="Vider les champs" class="btn btn-xs btn-default"/> </div> <br> <div class="clo-md-4"></div> <input type="submit" value="add" class="btn btn-small btn-success"/> </div> </div> </form>

Avec ce script à la fin:

  <script type="text/javascript"> function populateEnsembles(){ var id_select = $('#mySpace_databasebundle_zonestechnique_parcsimmobilier').val(); $.ajax({ url: "{{ path('addZonesConformites') }}", type: 'GET', data: {'id': id_select}, dataType: 'json', success: function(json){ $('#mySpace_databasebundle_zonestechnique_ensembles').html(''); $.each(json, function(index, value) { $('#mySpace_databasebundle_zonestechnique_ensembles').append('<option value="'+ value.id +'">'+ value.nom +'</option>'); }); } }); } </script>

C'est la première fois que j'utilise Ajax. Donc, je ne sais vraiment pas si c'est les bonnes méthodes, mais pour le moment, rien ne correspond et ne me montre ce que j'essaie de faire avec cette forme dynamique.

Quelqu'un pourrait m'aider?

Il s'agit d'une capture d'écran: Entrez la description de l'image ici

Comme vous pouvez le voir, je choisis un parc, la demande d'ajax fonctionne (symbole vert de la barre d'outils Symfony en bas). Et lorsque je procède à un débogage dans mon navigateur, dans l'onglet réseau, ma demande ajax fonctionne et me renvoie le bon identifiant du parc que je choisis. Mais il n'est pas peuplé la deuxième liste déroulante pour les ensembles. Dans le deuxième choix pour ensemble, j'ai tous les ensembles de ma base de données. Merci d'avance.

J'ai trouvé la solution. En fait, c'était une erreur novatrice.

Je dois choisir le chemin d'accès de ma route ajax et pas de ma route de formulaire. C'est pourquoi je n'ai pas d'erreur de code dans ma console lorsque je débogue l'application. C'est donc la ligne que je change dans le script ajax: url: "{{ path('addZonesConformites') }}" à url: "{{ path('formRoute') }}"