Bonjour à tous,
j'ai un formulaire que voici:
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' => 'MySpaceMyBundle:Parcsimmobilier',
'property' => 'nom',
'empty_value' => '-- sélectionner un parc --',
'label' => 'Choisir le parc immobilier : ',
))
->add('ensembles', 'entity', array(
'mapped' => false,
'class' => 'MySpaceMyBundle:Ensembles',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('e')
->join('e.parcsimmobilier','p');
},
'property' => 'nom',
'empty_value' => '-- sélectionner un ensemble --',
'label' => 'Choisir l\'ensemble : ',
))
->add('batiments','entity', array(
'class' => 'MySpaceMyBundle:Batiments',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('b')
->join('b.ensembles','e');
},
'property' => 'nom',
'empty_value' => '-- sélectionner un batiment --',
'label' => 'Choisir un batiment : ',
))
->add('categorieszonestechnique')
->add('nom')
->add('localisation')
->add('commentaire')
;
}
L'entité parcsimmobilier et ensembles sont liées par une relation ManyToOne ($parcsimmobilier dans Ensembles.php). L'entité Batiments.php est liée à Ensembles.php par une relation ManyToOne ($ensembles dans Batiments.php), et enfin ZonesTechnique.php est liée à Batiments.php par uen ManyToOne aussi ($batiments dans Zonestechnique.php).
Je dois faire un formulaire dynamique lors de la création d'une nouvelle ZonesTechnique, donc appel AJAX obligatoire. Tout cela doit se dérouler ainsi:
je sélectionne un parc, dans la liste déroulante suivante les ensembles liés à ce parc apparaissent, je sélectionne un ensemble, dans la liste déroulante suivante les bâtiments liés à l'ensemble préalablement sélectionné apparaissent.
Si vous voulez un apperçu, cela doit se faire comme ça(formulaire dynamique) mais aves les données présentent dans ma base bien entendu, et c'est là que je pêche...
Mon problème est liée au fait que ceci est ma première Ajax. Je ne sais pas vraiment si je m'y prend bien, voire même si je fais quoi que ce soit de bon.
Voci mon routing.yml pour l'appel de mes méthodes:
ajouterZonesConformites:
path: /gestionzonestechniquesconformites/ajouter
defaults: { _controller: MySpaceMyBundle:GestionZonesTechniques:ajouterZonesConformites }
requirements:
methods: GET
# Ajax
formulaireZones:
pattern: /gestionzonestechniquesconformites/ajouterformulaire
defaults: { _controller: MySpaceMyBundle:GestionZonesTechniques:formulaireZones }
requirements:
_method: GET
ajouterZonesConformites_process:
path: /gestionzonestechniquesconformites/ajouter/process
defaults: { _controller: MySpaceMyBundle:GestionZonesTechniques:ajouterZonesConformites }
requirements:
methods: POST
Je me pose quand même certaines question: Dois-je créer une route différente pour afficher le formulaire et pour le remplir? comment cela fonctionne t-il réellement? Comme vous pouvez le voir, j'ai une méthode pour afficher et envoyer le formulaire correspondant à deux routes, et une autre méthode pour remplir le formulaire en Ajax et sa route respective? C'est comme cela qu'il faut faire?
Voici mon controller pour remplir le formulaire et l'ajout lors de la validation du formulaire:
/**
* Select dynamique.
*
* @Route("/gestionzonestechniquesconformites/ajouterformulaire", name="formulaireZones")
* @Method("post")
*/
public function formulaireZonesAction() {
$request = $this->getRequest();
$em = $this->getDoctrine()->getEntityManager();
if($request->isXmlHttpRequest()) { // pour vérifier la présence d'une requete Ajax
$id = '';
$id = $request->get('id');
if ($id != '') {
$ensembles = $em->getRepository('MySpaceMyBundle:Ensembles')->getEnsembles($id);
echo $ensembles;
$tabEnsembles = array();
$i = 0;
foreach($ensembles as $ensemble) { // transformer la réponse à ta requete en tableau qui replira le select pour ensembles
$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('BIM ça plante');
}
}
//METHODE pour AJOUTER Zonestechniques
/**
* Select dynamique.
*
* @Route("/gestionzonestechniquesconformites/ajouterformulaire", name="formulaireZones")
* @Method("POST")
*/
public function ajouterZonesConformitesAction() {
$em=$this->getDoctrine()->getManager();
$zones = $em->getRepository('MySpaceMyBundle: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'));
}
//retourner le formulaire d'ajout si c'est invalide
else {
return $this->render('MySpaceMyBundle:ZonesTechnique:ajouterZonesTechniqueConformites.html.twig', array('form' => $form->createView(), 'zone' => $zones ));
}
}
Quand j'affiche ma page, "aucune erreur" si ce n'est dans ma symfony ToolBar, j'ai bien un onglet Ajax qui est présent. Il m'affiche un numéro (1 au départ) entouré de vert. Pour me dire que tout est en ordre. Toutefois dès que je choisis un parc dans ma première liste déroulante, un autre numéro "2" entouré en rouge apparaît. Là il y a une erreur, je clique dessus et voici ce que cela me dit:
No route found for "POST /gestionzonestechniquesconformites/ajouter": Method Not Allowed (Allow: GET, HEAD)
voici ma twig avec le script:
<form action="{{ path('ajouterZonesConformites_process') }}" method="POST">
<div class="row">
<div class="col-md-6">
<div>
{{ form_errors(form) }}
</div>
<div>
{{ form_label(form.parcsimmobilier, "Categorie(s) de la zone technique:", {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.parcsimmobilier) }}
{{ form_widget(form.parcsimmobilier, {'attr': {'class': 'form-control', 'id': 'parcsimmobilier', 'onChange':'remplirEnsembles();'}}) }}
</div>
<div>
{{ form_label(form.ensembles, "Categorie(s) de la zone technique:", {'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>
<br>
<div>
{{ form_label(form.categorieszonestechnique, "Categorie(s) de la zone technique:", {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.categorieszonestechnique) }}
{{ form_widget(form.categorieszonestechnique, {'attr': {'class': 'selectpicker categories'}}) }}
</div>
<br>
<div>
{{ form_label(form.nom, "Nom de la zone technique:", {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.nom) }}
{{ form_widget(form.nom, {'attr': {'class': 'form-control'}}) }}
</div>
<br>
<div>
{{ form_label(form.localisation, "Localisation de la zone:", {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.localisation) }}
{{ form_widget(form.localisation, {'attr': {'class': 'form-control'}}) }}
</div>
<br>
<div>
{{ form_label(form.commentaire, "Ajouter un commentaire:", {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.commentaire) }}
{{ form_widget(form.commentaire, {'attr': {'class': 'form-control'}}) }}
</div>
<br>
</div>
</div>
{# valiDation #}
<br>
<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="Ajouter" class="btn btn-small btn-success"/>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">function remplirEnsembles(){
var id_select = $('#myspace_databasebundle_zonestechnique_parcsimmobilier').val();
$.ajax({
url: "{{ path('ajouterZonesConformites') }}",
type: 'POST',
data: {'id': id_select},
dataType: 'json',
success: function(json){ // quand la réponse de la requete arrive
$('#myspace_databasebundle_zonestechnique_ensembles').html('');
$.each(json, function(index, value) { // et boucle sur la réponse contenu dans la variable passé à la function du success "json"
$('#myspace_databasebundle_zonestechnique_ensembles').append('<option value="'+ value.id +'">'+ value.nom +'</option>');
});
}
});
}
</script>
J'espère que vous pourrez m'éclairer sur comment réellement faire une requête Ajax, je pense que mon code doit avoir besoin de sérieuses modifications à ce niveau là.
Mais je me demande vraiment si je fais bien:
j'ai une méthode pour remplir le formulaire avec sa route correspondante (route Ajax). J'appelle le formulaire sur la méthode pour valider l'ajout d'une nouvelle zone technique. Ma méthode pour valider ce formulaire comprend 2 routes: une pour afficher en GET le formulaire, et une en POST pour soumettre et valider mes données.