Remplir dynamiquement un champ select avec ajax

Version imprimable

Bonjour,

Je débute avec Symfony2 et j'utilise la libraire FOSUserBundle pour la gestion de mon espace membre.

J'ai modifié mon formulaire d'inscription en ajoutant deux champs de type select ( pays et région). Je voudrais qu'en sélectionnant le pays que la liste région soit celle du pays sélectionné.

J'utilise ajax pour remplir ma liste de régions, cependant quand je sélectionne un pays et que j'affiche sa valeur, elle est indéfinie.

Quelqu'un pourrait-il m'aider à résoudre ce problème. Ci-dessous mes différents codes.

Le formulaire 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
 
{% block javascripts %}
    <script src="{{ asset('bootstrap-3.0.3/userbundle/js/fillRegistration.js') }}"  type="application/javascript"></script>
{% endblock %}
 
<form  "action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register
form-horizontal" role="form">
 
 
 
        <div class="col-md-3 white-background"></div>
       <div class="col-md-6">
        <div class="row">
                      <div class="form-group">
                <label class="col-sm-5 control-label">{{ form_label(form.country) }}</label>
                <div class="col-sm-7">
                {{ form_widget(form.country, {'attr': { 'class': 'form-control', 'onChange': 'fillRegion();', 'id': 'country'}}) }}
                </div>
              </div>
                  <div class="form-group">
                <label class="col-sm-5 control-label">{{ form_label(form.region) }}</label>
                <div class="col-sm-7">
                {{ form_widget(form.region, {'attr': {'class': 'form-control'}}) }}
                </div>
              </div>               
        </div>
             <div class="form-group">
        <div class=" col-sm-12 align-center-button">
            <button type="submit" id="_submit" name="_submit" class="btn btn-btn btn-primary">{{ 'registration.submit'|trans({},          'FOSUserBundle') }}</button>
        </div>
    </div>
       </div>
    <div class="col-md-3 white-background"></div>

Le code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function fillRegion()
{
        var id_country = "";
    alert(' avant ===> '+id_country);
    id_country = $("select.country option:selected").val();
    alert(' après ===> '+id_country);
    $.ajax({
      url: "{{ path('pme_registration_fill_region }}",
      type: 'POST',
      data: {'id': id_country},
      dataType: 'json',
      success: function(json){
     $('#region').html('');
     $.each(json, function(index, value) {
    $('#region').append('<option value="'+ value.regCode +'">'+ value.regName +'</option>');
      });
    }
  });
}

Le code du controller:

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
 
public function fillRegionAction()
    {
      $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 != '')
        {
          $tesObjets = $em->getRepository('PmeUserBundle:Countries')
                  ->find($id); // qui retourne une collection d'objet je présume
          $tabObjet = array();
          $i = 0;
          foreach($tesObjets as $tonObjet) // pour transformer la réponse à ta requete en tableau qui replira le select2
          {
        $tabObjet[$i]['regCode'] = $tonObjet->getAlpha2();
        $tabObjet[$i]['regName'] = $tonObjet->getLangFr();
          }
          $response = new Response();
          $data = json_encode($tabObjet); // c'est pour formater la réponse de la requete en format que jquery va comprendre
          $response->headers->set('Content-Type', 'application/json');
          $response->setContent($data);
          return $response;
        }
      }
      return new Response('Erreur');
    }
 }

la route vers l'appel ajax:

Code:

1
2
3
4
5
6
 
pme_registration_fill_region:
    pattern: /fillRegion
    defaults: { _controller: PmeUserBundle:UserBundle:fillRegion}
    requirements:
        _method: POST

Merci d'avance pour votre aide

Code:

1
2
$tesObjets = $em->getRepository('PmeUserBundle:Countries')
                  ->find($id); // qui retourne une collection d'objet je présume

Et non, c'est findAll() qui renvoit tous les objets d'une table.

30/01/2014, 10h27
paquito

Merci @gototog pour ton retour.

En utilisant find($id), je veux juste recupérer l'entité correspondant à l'id $id.
Cependant j'ai utilisé findAll() et j'ai toujours le même problème.
Le problème devrait se trouver entre le fichier twig, le js et la route puisque je n'arrive même pas à afficher le contenu de mon formulaire.
Mais pour l'instant je ne trouve pas c'est quoi le problème.
30/01/2014, 11h47
dukoid

procède par étape, tu as bien un retour de ta requête ajax ?

ensuite analyse les données du retour ajax , sous forme? tableau, objet etc ...

tu peux voir avec firebug si ça se passe bien aux niveau des requêtes.
30/01/2014, 12h13
paquito

Merci @dukoid pour cette piste.

En affichant les erreurs ajax, j'ai un statut d'erreur 404 (Page not found).
C'est certainement un problème de route. je vais regarder ça de plus près.
30/01/2014, 12h53
paquito
avec firebug j'ai cette erreur :
Code:

1 2 POST http://findjob.local/app_dev.php/%7B%7B %20path(%27pme_registration_fill_region%20%7D%7D 404 Not Found
c'est bien un problème de route mais je ne sais pas comment résourdre ce problème.

Merci encore pour votre aide.
30/01/2014, 13h32
gototog
ton code twig n'est pas interpreté. tu as ce javascript dans un fichier twig et non pas javascript? :aie:

Si il est dans twig c'est peut être qu'il faut fermer la quote:

Code:

path_ajax= "{{ path('pme_registration_fill_region' }}";

Si ce n'est pas le cas et que tu veux garder ton fichier en javacript, tu peux utilsier les variables globales comme

dans ton twig:
Code:

1 2 3 <script type="text/javascript"> var path_ajax= "{{ path('pme_registration_fill_region' }}"; </script>
Puis dans ton fichier js
Code:

1 2 $.ajax({ url: path_ajax,
30/01/2014, 14h52
paquito

Merci @gototog,

En apportant les modifications telles que tu me l'as conseillé, je n'ai plus le même problème.
Cependant j'ai une erreur de type 500 Internal Server Error.
Sachant que l'action doit s'effectuer sur le formulaire de registration de FOSUserBUndle est-ce-qu'il faudra ajouter l'action Ajax dans le Controller de FOSUserBundle ?

Merci pour votre aide?
30/01/2014, 15h01
gototog

ton erreur a lieu dans le controlleur ajax? dans l'affichage twig? quel est le message d'erreur?
On est pas magicien :D

J'ai pu résoudre ce problème, mais je rencontre une erreur de type "Requested Json Parse Failed" pourtant j'utilise bien l'en-tête json dans mon controller.

Voici mon controller

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  $request = $this->getRequest();
	   if($request->isXmlHttpRequest()) // pour vérifier la présence d'une requete Ajax
	   {
	   	 $idCountry = '';
	   	 $idCountry = $request->request->get('id');
	    	if ($idCountry != '')
	    	{
			$regions = $this->getDoctrine()
				->getEntityManager()
				->getRepository('PmeUserBundle:Regions')
				->getRegions($idCountry);
 
	    		$response = new Response();
	                $regions = json_encode(array('regions' => $regions));
        	        $response->headers->set('Content-Type', 'application/json');
        	        $response->setContent($regions);
        	        //return $response;
        	}
           }

Voici mon Js

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
 
function fillRegion()
{
        var id_country = "chaine vide";
	alert(id_country);
	id_country = $("#country").val();
	alert('après affectation : '+id_country);
	$.ajax({
      url: path_ajax,
      type: 'POST',
      data: {'id': id_country},
      dataType: 'json',
      success: function(json){ 
	 $('#region').html(''); 
	 $.each(json, function(index, value) { 
	$('#region').append('<option value="'+ value.id +'">'+ value.regName +'</option>');
      });
    },
	error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
  });
}

merci d'avance pour votre aide.

En meme temps ton return est en commentaire ^^

Pour faire tout ca en une ligne tu peux utiliser JsonResponse de symfony2, ca marche a coup sur:
Code:

1 2 3 4 5 6 $regions = $this->getDoctrine() ->getEntityManager() ->getRepository('PmeUserBundle:Regions') ->getRegions($idCountry); return new JsonResponse(array('regions' => $regions));

31/01/2014, 19h20
paquito

merci @gototog pour ton aide,

J'ai éssayé les lignes de code, mais j'ai toujours la même erreur. J'ai l'impression d'avoir une coquille quelque part dans le code. Je vais chercher encore d'où vient le problème mais si vous avez des idées, je suis toujours preneur.

Merci encore pour votre aide.