Discussion :

[paquito]

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 :

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
 
{% 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 :

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
 
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 :

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
 
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 :

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

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

[gototog]

Code :

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

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.

[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.

[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.

[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.

[paquito]

avec firebug j'ai cette erreur :

Code :

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

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.

[gototog]

ton code twig n'est pas interpreté. tu as ce javascript dans un fichier twig et non pas javascript?

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

Code :

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

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 :

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

1
2
3
<script type="text/javascript">
var path_ajax= "{{ path('pme_registration_fill_region' }}";
</script>

Puis dans ton fichier js

Code :

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

1
2
$.ajax({
      url: path_ajax,

[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?

[gototog]

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

[paquito]

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 :

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
 
  $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 :

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
 
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.

[gototog]

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 :

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

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

[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.