Discussion :

[massacreur]

Bonjour,

Cette fois ci j'ai une question sur la mise en place du javascript pour charger automatiquement le contenu d'une liste déroulante en fonction du choix effectué sur une autre liste.

Je m'explique, j'ai un objet Article qui est rattaché à une Sous-catégorie.
Toutefois cette Sous-catégorie dépend de la catégorie.

Je souhaiterai donc afficher sur mon formulaire :

Nom article : zone_de_texte
Catégorie : liste_déroulante
Sous-Catégorie : liste_déroulante (rempli en fonction de la catégorie sélectionnée)

Et le soucis c'est que quand je créais mon builder, je ne peux pas ajouter ma Catégorie car mon Entity est lié directement à ma sous-catégorie, du coup aucun Setter n'est trouvé.

J'imagine qu'avec symfony ca doit se faire assez facilement mais pas moyen de trouver un exemple
Sinon sans Symfony j'aurai utilisé du javascript mais la avec le builder et tout je ne vois pas trop comment faire...

Merci d'avance pour votre aide!

[pc.bertineau]

Tu ne pourras te passer de l'Ajax dans ton cas, à moins de recharger ta page entièrement après le remplissage du premier select.

[massacreur]

Tu aurais un exemple stp sur lequel je pourrais m'appuyer

[pc.bertineau]

Pas du tout.

Pour l'instant il n'y a pas de "Bonnes pratiques" Ajax préconisées par Symfony2.

Pour bien comprendre le principe de l'Ajax et particulièrement pour ton cas, voici un très bon tutoriel qui commence à dater, mais le principe est exactement le même. A toi de l'adapter

http://siddh.developpez.com/articles/ajax/#LIV-A

Pour la partie JavaScript, je te déconseille d'utiliser des objets XMLHttpRequest purs, mais d'employer une librairie telle que Protoype.JS. La plupart des autres librairies plus haut niveau telles que jQuery embarquent nativement Prototype.JS donc tu ne seras pas trop déboussolé quand tu passeras à du dev plus intensif...

[winzou]

Ton champ catégorie ne fait pas parti de tes objets en fait, donc il ne doit pas être dans ton form builder.
Une solution pour toi je pense, c'est de faire à la main un <select> dans ton template, sur lequel tu vas binder du js. Et en fait symfony ne va jamais en entendre parler de ce select.

En JS, tu peux soit faire de l'ajax pour récupérer la liste des sous catégorie de la catégorie tout juste sélectionnée, soit (mieux) tu charges toutes les sous catégories dans un tableau JS, et ensuite tu ne mets dans ton select des sous catégorie que certains items de ce tableau.

[lidaa]

Alors, pour moi, je pense qu'il te faut un champ catégorie de type entity, dans le quel tu charges toutes les catégories, puis après la sélection d'une catégorie, et via Ajax, la deuxième liste des sous catégories sera remplie.

Un peu de code :


From:

Code :

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

1
2
3
4
5
6
7
8
9
 
$builder->add()
           …
 
          ->add("categorie", "entity", array("class" => "AcmeDemoBundle:Categorie", "property" => "nom"))
          ->add("sous_categorie", "choice", array("choices" => array('*****'))) 
 
           …  
->add();

Template (jquery)

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
 
        $("#fromname_categorie").change(function() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url:  '{{ path('to_action_in_controller') }}',
                data: 'id_categorie=' + $(this).val(),
                success: function(response)
                {
                    $('#formname_sous_categorie').find("option").remove();
                    $.each(response, function(i, item) {
                        $('#formname_sous_categorie').append(new Option(item, i));
                    });
                }
            });

Controller (Ajax):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
        $list_sous_categorie = array();
        if ($this->container->get('request')->isXmlHttpRequest()) {
              // sélectionner l'objet Catégorie selon l'ID envoyé
              //  récupérer les sous catégorie de la catégorie sélectionnée
             // remplir le tableau des sous categories: $list_sous_categorie
        }
 
        $response = new Response(json_encode($list_sous_categorie));
        $response->headers->set('Content-Type', 'application/json');
        return $response;

[cescu]

Bonsoir,

dans l'exemple de lidaa que j'essaye de reproduire

lorsqu'il définit son template :

$("#fromname_categorie").change(function() {
$.ajax({
type: 'POST',
dataType: 'json',
url: '{{ path('to_action_in_controller') }}',
data: 'id_categorie=' + $(this).val(),
success: function(response)
{
$('#formname_sous_categorie').find("option").remove();
$.each(response, function(i, item) {
$('#formname_sous_categorie').append(new Option(item, i));
});
}
});

j'aurais aimé connaitre comment il définit l'affichage des ses variables de façon à récupérer #fromname_categorie.
Dans mon cas j'ai dans mon template

<div>

{{ form_label(form.ufr, "U.F.R.") }}

{{ form_errors(form.ufr) }}

{{ form_widget(form.ufr) }}

</div>

que dois je utiliser dans $(#...).change Bien sur j'ai essayé $('#formname_ufr').change(function() mais je n'ai rien

Merci beaucoup