JSF Primefaces Dialog

Version imprimable

19/06/2012, 13h08
zouhayr

JSF Primefaces Dialog

Bnojour tous le monde

j'ai vraiment besoin de votre aide :calim2:

Voila j'utilise JSF avec les composants Primefaces
mon problème réside dans le composant Dialog, il contient 2 radio boutons,si je click sur un radio button je veux que des composants s'afficher dans cette Dialog et si je click sur l'autre radio bouton les premiers composants affichées seront cachés et des nouvel composants apparaits.

la solustion css ne marche po :s

merci pour votre aide
19/06/2012, 14h22
paissad

Bonjour,
pour que tu puisses être aidé, il faut que tu montres un peu de code et que tu détailles.
Cordialement,

je vous remercie pour votre réponse
donc voila le code de mon composant dialog :

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
38
39
40
41
 <p:dialog widgetVar="eventDialog" header="Crétaion d'avis" showEffect="clip" hideEffect="clip" modal="true" style="font-size: 13px">
 
                    <h:panelGrid  columns="2" id="eventDetails">
 
                        <h:outputText value="Type d'avis : " />  
                        <p:selectOneRadio value="#{mBSchedule.typeAvis}" layout="pageDirection" style="margin-bottom: 10px" >  
                            <f:selectItem itemLabel="Avis légale" itemValue="legale"  />  
                            <f:selectItem itemLabel="Avis de vente" itemValue="vente" />  
                        </p:selectOneRadio>  
 
                        <h:panelGrid  columns="2" id="langues" >
                            <h:outputText value="Langue d'avis : " />  
                            <p:selectManyCheckbox value="#{mBSchedule.liste_langue}" layout="pageDirection"  style="margin-bottom: 10px">  
                                <f:selectItem itemLabel="Français" itemValue="f" />  
                                <f:selectItem itemLabel="Arabe" itemValue="a" /> 
                            </p:selectManyCheckbox>  
                        </h:panelGrid>
 
                    </h:panelGrid>
 
                    <hr/>
 
                    <h:panelGrid  columns="2" id="bcexistant" >
 
                        <h:outputText value="Associé l'avis a un bon de commande : " />  
                        <p:selectOneRadio value="#{mBSchedule.typeAvis}" layout="pageDirection" style="margin-bottom: 10px" >  
                            <f:selectItem itemLabel="Existant " itemValue="existant"  />  
                            <f:selectItem itemLabel="Nouveau " itemValue="nouveau" />  
                        </p:selectOneRadio>  
 
                        <h:panelGrid  columns="2" id="listbc" >
                            <h:outputText value="Bon de Commande " />  
                            <p:selectOneMenu id="langue" value="#{mBSchedule.bc}">
                                <f:selectItems value="#{mBSchedule.bcs}" var="bc" itemLabel="#{bc.nom}" itemValue="#{bc.id}"/>
                            </p:selectOneMenu> 
                        </h:panelGrid>
                    </h:panelGrid>
 
                    <hr/>
                    <p:commandButton value="Valider" action="#{mBSchedule.valider}" style="font-size: 12px"/>
                </p:dialog>

je veux quand je click sur le radio bouton "Avis de vente" il m'affiche le panelGrid "langues" et quand je click sur le radio bouton "Avis légal" la panelGrid "langues" disparait

la même chose pour le panelGrid "listbc"

merci beaucoup les amis pour votre aide

Bonjour zouhayr,

Pour établir ce que tu nécessites, il va falloir faire plusieurs changements.

Tout d'abord, il te faudra ajouter un formulaire à l'intérieur de ta boite de dialogue.
Par conséquent, tu devras déclarer ta boite de dialogue avant et en dehors du formulaire de ta page (pour éviter les imbrications de formulaire)

Ensuite tu dois modifier l'entête de ton panelgrid pour conditionner son affichage.

Et enfin tu dois ajouter un écouteur sur ta liste déroulante pour rafraichir partiellement ton ihm

Voici ce que cela doit nous donner

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
38
39
40
41
42
43
44
45
46
 
 
<p:dialog widgetVar="eventDialog" header="Crétaion d'avis" showEffect="clip" hideEffect="clip" modal="true" style="font-size: 13px">
      <form id="formulaire">
                    <h:panelGrid  columns="2" id="eventDetails">
 
                        <h:outputText value="Type d'avis : " />  
                        <p:selectOneRadio value="#{mBSchedule.typeAvis}" layout="pageDirection" style="margin-bottom: 10px" >  
                            <f:selectItem itemLabel="Avis légale" itemValue="legale"  />  
                            <f:selectItem itemLabel="Avis de vente" itemValue="vente" />  
                                 <p:ajax event="change" update="formulaire:langues">
                        </p:selectOneRadio>  
 
                       <h:panelGrid  columns="2" id="langues" rendered="#{mBSchedule.typeAvis == 'vente'}">
                            <h:outputText value="Langue d'avis : " />  
                            <p:selectManyCheckbox value="#{mBSchedule.liste_langue}" layout="pageDirection"  style="margin-bottom: 10px">  
                                <f:selectItem itemLabel="Français" itemValue="f" />  
                                <f:selectItem itemLabel="Arabe" itemValue="a" /> 
                            </p:selectManyCheckbox>  
                        </h:panelGrid>
 
                    </h:panelGrid>
 
                    <hr/>
 
                    <h:panelGrid  columns="2" id="bcexistant" >
 
                        <h:outputText value="Associé l'avis a un bon de commande : " />  
                        <p:selectOneRadio value="#{mBSchedule.typeAvis}" layout="pageDirection" style="margin-bottom: 10px" >  
                            <f:selectItem itemLabel="Existant " itemValue="existant"  />  
                            <f:selectItem itemLabel="Nouveau " itemValue="nouveau" />  
                        </p:selectOneRadio>  
 
                        <h:panelGrid  columns="2" id="listbc" >
                            <h:outputText value="Bon de Commande " />  
                            <p:selectOneMenu id="langue" value="#{mBSchedule.bc}">
                                <f:selectItems value="#{mBSchedule.bcs}" var="bc" itemLabel="#{bc.nom}" itemValue="#{bc.id}"/>
                            </p:selectOneMenu> 
                        </h:panelGrid>
                    </h:panelGrid>
 
                    <hr/>
                    <p:commandButton value="Valider" action="#{mBSchedule.valider}" style="font-size: 12px"/>
 
    </form>
</p:dialog>