PrimeFaces - Utilisation AJAX sur liste déroulante

**Fred30** · 17/04/2012, 22h56

Bonsoir à tous,

Je suis en train de développer une application, dans celle-ci, j'ai trois listes déroulantes.
Le choix de la première doit incrémenter la seconde et de même pour la troisième.

J'ai décidé d'utiliser

Code :

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

<pou:Ajax />

proposé par la librairie PrimeFaces.

Globalement cela fonctionne bien, mais je n'arrive pas à faire en sorte que sur changement du choix de la première liste, toutes les autres se remettent à jour.

De plus, parfois ce n'est pas instantanée la mise à jour sur un choix, il faut cliquer plusieurs fois, voir insister, existe il une astuce pour cela ?

Les trois listes déroulantes :

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
 
<pou:panel id="specialitePanel" header="Choix de la spécialité" styleClass="specialitePanel">
 
                            <div id="famille">
                                <h1 class="sousItem">Famille :</h1>
                                <f:view>
                                    <pou:selectOneMenu id="choixFamille" value="#{Recherche_Technicien_DTO.nom_famille}"  styleClass="combo1">
                                        <f:selectItems value="#{Famille_BDD.nom_familles}"/>
                                        <pou:ajax listener="#{Recherche_Technicien_DTO.choixCombo}" rendered="choixMarque" update="choixMarque"/>
                                    </pou:selectOneMenu>
                                </f:view>
                            </div>
 
                            <div id="marque">
                                <h1 class="sousItem">Marque :</h1>
                                <f:view>
                                    <pou:selectOneMenu id="choixMarque" value="#{Recherche_Technicien_DTO.nom_marque}" styleClass="combo1">
                                        <f:selectItems value="#{Recherche_Technicien_DTO.marqueItem}"/>
                                        <pou:ajax listener="#{Recherche_Technicien_DTO.choixComboProduits()}" rendered="choixSpecialite" update="choixSpecialite"/>
                                    </pou:selectOneMenu>
                                </f:view>
                            </div>
 
                            <div id="specialite">
                                <h1 class="sousItem">Produit :</h1>
                                <f:view>
                                    <pou:selectOneMenu id="choixSpecialite"  value="#{Recherche_Technicien_DTO.nom_specialite}" styleClass="combo1">
                                        <f:selectItems value="#{Recherche_Technicien_DTO.specialiteItem}"/>
                                    </pou:selectOneMenu>
                                </f:view>
                            </div>
                        </pou:panel>

La classe java contenant les méthodes pour les incrémenter :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
//Listener chargement combo
    public void choixCombo(){
        // Nom de la famille sélectionné
        System.out.println("Famille sélectionnée : "+nom_famille);
        //Requete SQL pour récupérer codre_produit selon famille
        String marqueSQL = "select code_famille FROM famille WHERE libelle='" + nom_famille + "'";
        try{
            Statement state = this.connV2.createStatement();
            ResultSet rs = state.executeQuery(marqueSQL);
            rs.next();
            String CodeFamille = rs.getString(1);
 
            rs.close();
            //Etape 2 : recuperation du libelle du produit selon le code produit
            String marqueSQL2 = "SELECT libelle FROM produit WHERE code_famille=" + CodeFamille;
 
            //Execution de la requete
            rs = state.executeQuery(marqueSQL2);
 
            setMarqueItem(new ArrayList<SelectItem>());
            cpt = 0;
            while (rs.next()) {                
                getMarqueItem().add(cpt, new SelectItem(rs.getString(1)));
                ++cpt;
            }
            rs.close();  
 
            for(SelectItem item : marqueItem){
                System.out.println("Nom des marques : "+item.toString());
            }
        }catch(Exception e1){
            System.out.println("Erreur remplissage combo marque : "+e1.getMessage());
        }
    }
 
    //Listener chargement combo produits
    public void choixComboProduits() {
        //Nom de la marque
        System.out.println("Marque sélectionnée : " + nom_marque);
        //Requete SQL pour récupérer le code_produit de la marque
        String produitSQl = "select code_produit FROM produit WHERE libelle='" + nom_marque + "'";
        try {
            Statement state = this.connV2.createStatement();
            ResultSet rs = state.executeQuery(produitSQl);
            rs.next();
            String CodeMarque = rs.getString(1);
            //Une fois le resultat traite on ferme pour relancer la seconde partie de la requete
            rs.close();
            //On recup�re le libelle selon le code famille
            String produitSQL2 = "SELECT nom_technique FROM technique WHERE code_produit='" + CodeMarque + "'";
            //Execution de la requete
            rs = state.executeQuery(produitSQL2);
 
            cpt = 0;
            specialiteItem = new ArrayList<SelectItem>();
 
            while (rs.next()) {
                specialiteItem.add(cpt,new SelectItem(rs.getString(1)));
                ++cpt;
            }
            rs.close();
            for(SelectItem item : specialiteItem){
                System.out.println("Nom des specialites : "+item.toString());
            }
        } catch (Exception e) {
            System.out.println("Erreur remplissage spéclialité : " + e.getMessage());
        }
    }

Cette classe étant "serializable"

Le faces-config.xml :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" 
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
              http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"
              version="2.1">
 
 <!--Declaration des Domaines -->
 <managed-bean>
        <managed-bean-name>Technicien</managed-bean-name>
        <managed-bean-class>Domaines.Technicien</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
  <managed-bean>
        <managed-bean-name>Responsable</managed-bean-name>
        <managed-bean-class>Domaines.Responsable</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
 <!--Declaration des DTO -->
 <managed-bean>
        <managed-bean-name>TechnicienDTO</managed-bean-name>
        <managed-bean-class>DTO.Technicien_DTO</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
 <managed-bean>
        <managed-bean-name>Recherche_Technicien_DTO</managed-bean-name>
        <managed-bean-class>DTO.Recherche_Technicien_DTO</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
 <!--Declaration des Controleurs -->
 
 <!-- Controleur Ajout_Technicien -->
    <managed-bean>
        <managed-bean-name>AjoutTechnicienControleur</managed-bean-name>
        <managed-bean-class>Controleurs.Ajout_Technicien_Controleur</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
        <managed-property>
            <property-name>TechnicienDTO</property-name>
            <property-class>DTO.Technicien_DTO</property-class>
            <value>#{technicienDTO}</value>
        </managed-property>
    </managed-bean>
 
     <!-- Controleur Recherche_Technicien -->
     <managed-bean>
        <managed-bean-name>RechercheTechnicienControleur</managed-bean-name>
        <managed-bean-class>Controleurs.Recherche_Technicien_Controleur</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
        <managed-property>
            <property-name>Recherche_Technicien_DTO</property-name>
            <property-class>DTO.Recherche_Technicien_DTO</property-class>
            <value>#{rechercheTechnicienDTO}</value>
        </managed-property>
    </managed-bean>
 
 
 <!--Declaration des listes -->
 
<!-- Liste des Techniques-->
 <managed-bean>
        <managed-bean-name>TechniqueBDD</managed-bean-name>
        <managed-bean-class>BDD.Technique_BDD</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
<!-- Liste des Localisations-->
<managed-bean>
        <managed-bean-name>Localisation_BDD</managed-bean-name>
        <managed-bean-class>BDD.Localisation_BDD</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
 <!-- Liste des Domaines-->
<managed-bean>
        <managed-bean-name>Domaine_BDD</managed-bean-name>
        <managed-bean-class>BDD.Domaine_BDD</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
  <!-- Liste des Responsables-->
<managed-bean>
        <managed-bean-name>Responsable_BDD</managed-bean-name>
        <managed-bean-class>BDD.Responsable_BDD</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 
   <!-- Liste des Familles-->
<managed-bean>
        <managed-bean-name>Famille_BDD</managed-bean-name>
        <managed-bean-class>BDD.Famille_BDD</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
</faces-config>

Merci de votre aide
Fred

**zanka131** · 29/06/2012, 17h28

Bonjour,

Je suis débutante donc je ne peux pas t'aider, par contre toi tu peux surement m'aider pour le coup. J'essaye de mettre à jour un menu deroulant à partir de la selection dans un autre mais la valeur que tu appelles ici nom_famille par exemple n'est pas récupérée par la fonction appelée, je ne comprend pas comment faire pour qu'il l'a connaisse

Listes déroulantes

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
41
42
43
44
45
46
47
 
<ui:composition 
    template="/WEB-INF/template/template.xhtml" 
    xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >
 
 
<!-- ********** Debut du contenu à modifier ********** -->
<ui:define name="contenu">
    <p:messages id="messages" autoUpdate="true"/>
        <h:form>
            <h1><h:outputText value="Add"/></h1> 
 
            <h:panelGrid columns="2" >
            </h:selectOneMenu>
 
                  <h:outputLabel value="idFournisseur:" for="idFournisseur" />
                  <h:selectOneMenu id="idFournisseur" 
                                   value="#{commandeManagedBean.newCommande.idFournisseur}" 
                                   required="true" requiredMessage="The IdFournisseur field is required."
                                   converter="#{converterManagedBean.fournisseurConverter}"
                                   >
                        <f:selectItems value="#{converterManagedBean.allFournisseurLib}"/>
                        <p:ajax  update="idProduit" rendered="idProduit" listener="#{converterManagedBean.changeListener()}"  />
                  </h:selectOneMenu>
 
 
                  <h:outputLabel value="idProduit" for="idProduit" />
                  <h:selectOneMenu id="idProduit" 
                                   value="#{commanderManagedBean.newCommander.idProduit}" 
                                   required="true" requiredMessage="The IdProduit field is required."
                                   converter="#{converterManagedBean.produitConverter}"
                                   >
 
                      <f:selectItems value="#{converterManagedBean.allProduitLib}"/>
                    </h:selectOneMenu>
               </h:panelGrid> 
        <p:separator />
            <p:commandButton id="Retour" value="Back" action="CommandeList"/>        
            <p:commandButton id="add" value="Ajouter" action="#{commandeManagedBean.create}"/>
        </h:form>
</ui:define>
<!-- ********** Fin du contenu à modifier ********** -->
</ui:composition>

Code :

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

1
2
3
4
5
6
7
8
 
 
public void changeListener() {
 
     System.out.println(idFournisseur);
         idProduit = getProduitLibByFournisseur();
 
}

le sytem.out.println me renvoi null à tous les coups

Merci

PrimeFaces - Utilisation AJAX sur liste déroulante

JSF Java

Vue hybride

Discussions similaires

Partager

Partager