Discussion :

[laurentche]

Bonjour,

J'ai un liste déroulante avec plusieurs valeur et lorsque je choisis une valeur précise, le deuxième select se rempli avec la valeur choisie.
En fonction du choix de la valeur d'un select, un deuxième select se rempli.

J'ai trouvé un exemple sur internet mais impossible de le faire fonctionner ... http://ismekteb.blogspot.fr/2012/10/...uete-ajax.html
Lorsque je sélectionne une valeur du premier select l'autre select se rempli bien mais avec toutes les informations se trouvant sur ma vue (code html, balise,code jquery etc... inclus )
C'est le controller qui me pose problème et le data: $(this).val(), de ma fonction jQuery car je ne sais pas trop à quoi correspond à quoi .
Au niveau 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
19
20
21
22
23
24
25
26
27
28
 
public function ajaxAction() {
 
        public function ajaxAction() {
 $request = $this->container->get('request');
if ($this->container->get('request')->isXmlHttpRequest()) {
            //code à ajouter pour récupérer la valeur du sélect 
 
  //boucle pour remplir la list déroulante avec le résultat
foreach ($variable as $variables) {
 
   }
      }
        }
 
        //Instancier une "réponse" grâce à l'objet "Response"
 
        $response = new Response(json_encode());
 
       //Lui indiquer le type de format dans le quelle est envoyé la réponse
 
        $response->headers->set('Content-Type', 'application/json');
 
       //Retourner la tout à notre liste déroulante
 
        return $response;
 
    }

Dans ma vue twig au niveau de Jquery comme le controller est faussé , jquery ne fonctionne pas trop bien

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
 
 
 
<form action="" method="post" {{ form_enctype(form) }}>
 
 
{{ form_widget(form.cheveux, { 'attr': {'class': 'class_image'} }) }}
{{ form_widget(form.image, { 'attr': {'class': 'class_remplir'} }) }}
            $(".class_image").change(function() {
 
           .............................
                $.ajax({
 
                    //On lui indique le type d'envoie des informations
 
                    type: 'POST',
 
                    //On lui indique le chemin de la fonction, ici la route vers la fonction ajaxAction() de mon controller
 
                    url:  '{{ path('select_ajax') }}', 
 
                    data: $(this).val(), //variable à changer pour éviter de récupérer tout le code de ma vue
 
                    //Enfin nous lui disons de remplir notre formulaire avec le resultat  
 
                    success: function(response)
 
                    {
     //Code fonctionne puisse je select est rempli 
                        $('.class_remplir').find("option").remove();
 
                        $.each(response, function(i, item) {
 
                            $('.class_remplir').append(new Option(item, i));
 
                        });
 
                    } 
 
                }

Le fait d'ajouter dans la partie Jquery la valeur de data : à $(this).val() me renvoi tout le contenu de la vue dans le deuxième select. Apriori le reste fonctionne car le deuxième select est rempli même si ce n'est pas la bonne information.

Quelqu'un peut il me guider sur ce que je dois mettre au niveau du controller car ajax et moi cela fais deux et je n'ai pas compris les exemples sur internet......

Merci

[laurentche]

J'arrive à ajouter dans le second select les information de la base de donnée mais ce que j'aimerai faire c'est de récuperer la valeur du premier sélect pour l'ajouter dans mon second.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
public function ajaxAction() {
   //Déclarer un tableau de type Array
        $list_ville = array();
 
        $request = $this->container->get('request');
        //vérifier le type de la requête
 
        if ($this->container->get('request')->isXmlHttpRequest()) {
           //Récuperer le choix que vous fait dans la liste déroulante 
 
           $id = $request->request->get('id');
 
            //Faire la requête pour récurer la liste sélectionné, grâce à leur "id", insérer ce résultat dans $villes   
 
            //Remplir la liste déroulante avec le résultat  
$list=$this->getDoctrine()->getManager();
 
      $villes=$list->getRepository('TeBundle:Utilisateur')->findAll();
            foreach ($villes as $v) {
 
                $list_ville[$v->getId()] = $v->getImage();
            }
        }
        //Instancier une "réponse" grâce à l'objet "Response"
 
        $response = new Response(json_encode($list_ville));
 
       //Lui indiquer le type de format dans le quelle est envoyé la reponse
 
        $response->headers->set('Content-Type', 'application/json');
 
       //Retourner la tout à notre liste déroulante
 
        return $response;
    }
}

Mon jquery dans la vue 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
34
35
36
 
 $(".class_image").change(function() {
 
                $.ajax({
 
                    //On lui indique le type d'envoie des informations
 
                    type: 'POST',
 
                    //On lui indique le chemin de la fonction
 
                    url:'{{ path('select_ajax') }}',
 
                    //On lui donne la valeur du choix qu'on a fait, et id est la variable qui va contenir notre valeur, nous la retrouvons dans notre controller
 
                    data: 'id=' + $(this).val(),
 
                    //Enfin nous lui disons de remplir notre formulaire avec le resultat  
 
                    success: function(response)
 
                    {
 
                        $('.class_remplir').find("option").remove();
 
                        $.each(response, function(i, item) {
 
                            $('.class_remplir').append(new Option(item, i));
 
                        });
 
                    }
 
                }
 
            )});

mon routing qui renvoi vers le controller avec la meme url que celui pour afficher le formulaire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
te_ajouter:
    path:     /ajouter
    defaults: { _controller: TeBundle:Utilisateur:ajouter}
    options:
        expose: true
select_ajax:
    path:     /ajouter
    defaults: { _controller:TeBundle:Utilisateur:ajax}
    options:
        expose: true

et mon formulaire dans le répertoire form

Code :

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

1
2
3
 
->add('cheveux', 'choice', array('choices' => array('fr' => 'France',  'es' => 'Espagne', 'uk' => 'Royaume Unis'), 'label' => 'Pays : '))
->add('image', 'choice', array('empty_value' => '', 'required' => false, 'label' => 'Ville : '))

Je récupère sur le premier select les informations france, espagne etc et sur le deuxième je récupère la list des images . Je veux juste récuperer la valeur du premiere et l'ajouter dans le deuxième;

[laurentche]

J'arrive à ajouter dans le second select les information de la base de donnée mais ce que j'aimerai faire c'est de récuperer la valeur du premier sélect pour l'ajouter dans mon second.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
public function ajaxAction() {
   //Déclarer un tableau de type Array
        $list_ville = array();
 
        $request = $this->container->get('request');
        //vérifier le type de la requête
 
        if ($this->container->get('request')->isXmlHttpRequest()) {
           //Récuperer le choix que vous fait dans la liste déroulante 
 
           $id = $request->request->get('id');
 
            //Faire la requête pour récurer la liste sélectionné, grâce à leur "id", insérer ce résultat dans $villes   
 
            //Remplir la liste déroulante avec le résultat  
$list=$this->getDoctrine()->getManager();
 
      $villes=$list->getRepository('TeBundle:Utilisateur')->findAll();
            foreach ($villes as $v) {
 
                $list_ville[$v->getId()] = $v->getImage();
            }
        }
        //Instancier une "réponse" grâce à l'objet "Response"
 
        $response = new Response(json_encode($list_ville));
 
       //Lui indiquer le type de format dans le quelle est envoyé la reponse
 
        $response->headers->set('Content-Type', 'application/json');
 
       //Retourner la tout à notre liste déroulante
 
        return $response;
    }
}

Mon jquery dans la vue 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
34
35
36
 
 $(".class_image").change(function() {
 
                $.ajax({
 
                    //On lui indique le type d'envoie des informations
 
                    type: 'POST',
 
                    //On lui indique le chemin de la fonction
 
                    url:'{{ path('select_ajax') }}',
 
                    //On lui donne la valeur du choix qu'on a fait, et id est la variable qui va contenir notre valeur, nous la retrouvons dans notre controller
 
                    data: 'id=' + $(this).val(),
 
                    //Enfin nous lui disons de remplir notre formulaire avec le resultat  
 
                    success: function(response)
 
                    {
 
                        $('.class_remplir').find("option").remove();
 
                        $.each(response, function(i, item) {
 
                            $('.class_remplir').append(new Option(item, i));
 
                        });
 
                    }
 
                }
 
            )});

mon routing qui renvoi vers le controller avec la meme url que celui pour afficher le formulaire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
te_ajouter:
    path:     /ajouter
    defaults: { _controller: TeBundle:Utilisateur:ajouter}
    options:
        expose: true
select_ajax:
    path:     /ajouter
    defaults: { _controller:TeBundle:Utilisateur:ajax}
    options:
        expose: true

et mon formulaire dans le répertoire form

Code :

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

1
2
3
 
->add('cheveux', 'choice', array('choices' => array('fr' => 'France',  'es' => 'Espagne', 'uk' => 'Royaume Unis'), 'label' => 'Pays : '))
->add('image', 'choice', array('empty_value' => '', 'required' => false, 'label' => 'Ville : '))

Je récupère sur le premier select les informations france, espagne etc et sur le deuxième je récupère la list des images . Je veux juste récuperer la valeur du premiere et l'ajouter dans le deuxième;

[laurentche]

En faisant dans la fonction jquery:

Code :

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

1
2
 
 alert($(this).val());

Je récupère bien valeur de l'option sélectionné . Ensuite je suppose que c'est dans le controller que cela fonctionne pas car c'est tout le code de la vue que je récupère et pas cette valeur ...
Personne ne sait pourquoi ?

[laurentche]

personne ne sais récupérer la valeur d'un select pour l'enregistrer dans un autre ?

[Pifon]

Moi je ferrait le tout en js

Code :

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

1
2
 
  $('#id_de_ton_2em_select').append('<option>'+ $(this).val() +'</option>')

[laurentche]

merci de m'avoir répondu et en effet je sais pas pourquoi je me suis dirigé vers ajax et le controler etc...
Avec Jquery et les classs de mon formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<form action="" method="post" {{ form_enctype(form) }}>
 
{{ form_widget(form.cheveux, { 'attr': {'class': 'class_select'} }) }}
 
{{ form_widget(form.image, { 'attr': {'class': 'class_remplir'} }) }}
......
 $(".class_select").change(function() {
 
$(".class_remplir").val($(this).val());

cela fonctionne si je change le deuxième choice en input