Faire apparaître des cases à cocher cachées

Version imprimable

Bonjour,

J'ai une liste de cases à cocher. A chaque fois que je coche une case, une autre doit apparaître en face. Ce que je n'arrive pas à faire, c'est faire apparaître ces cases...
Mon code ressemble à ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <h:panelGrid id="blocPersonnes" <f:facet name="header"> <h:outputText value="PERSONNES INTERESSEES" /> </f:facet> <h:panelGroup id="groupePersonnesInteressees" layout="block"> <fieldset> <legend>Cochez les personnes intéressées</legend> <h:selectManyCheckbox layout="pageDirection"> <f:selectItems value="#{gensBean.listePersonnes()}" /> </h:selectManyCheckbox> </fieldset> </h:panelGroup> <h:panelGroup id="groupePersonnesConfirmees" layout="block"> <fieldset> <legend>Cochez les personnes qui viendront</legend> <h:selectManyCheckbox layout="pageDirection"> <f:selectItems value="#{gensBean.listePersonnes()}" /> </h:selectManyCheckbox> </fieldset> </h:panelGroup> </h:panelGrid>
La seconde partie est censée être cachée et n'apparaît que si la case à cocher qui a précède est cochée. Une idée de comment faire?
Merci!

Si je comprends bien, c'est le block "groupePersonnesConfirmees" qui doit être caché si rien n'est coché dans le block "groupePersonnesInteresseesé", c'est ça ?

Si oui, j'utiliserais un code de ce genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h:panelGroup id="groupePersonnesInteressees" layout="block">
    <fieldset>
        <legend>Cochez les personnes intéressées</legend>
        <h:selectManyCheckbox layout="pageDirection">
            <f:ajax event="change" render="groupePersonnesConfirmees"/>
            <f:selectItems value="#{gensBean.listePersonnes()}" />
        </h:selectManyCheckbox>
    </fieldset>
</h:panelGroup>

<h:panelGroup id="groupePersonnesConfirmees" layout="block">
    <h:panelGroup rendered="#{tonManagedBean.leTestSiUnElementEstSélectionné()}">
        <fieldset>
            <legend>Cochez les personnes qui viendront</legend>                    
            <h:selectManyCheckbox layout="pageDirection">
                <f:selectItems value="#{gensBean.listePersonnes()}" />
            </h:selectManyCheckbox>
        </fieldset>
    </h:panelGroup>
</h:panelGroup>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h:panelGroup id="groupePersonnesInteressees" layout="block">
    <fieldset>
        <legend>Cochez les personnes intéressées</legend>
        <h:selectManyCheckbox layout="pageDirection">
            <f:ajax event="change" render="groupePersonnesConfirmees"/>
            <f:selectItems value="#{gensBean.listePersonnes()}" />
        </h:selectManyCheckbox>
    </fieldset>
</h:panelGroup>

<h:panelGroup id="groupePersonnesConfirmees" layout="block">
    <h:panelGroup rendered="#{tonManagedBean.leTestSiUnElementEstSélectionné()}">
        <fieldset>
            <legend>Cochez les personnes qui viendront</legend>                    
            <h:selectManyCheckbox layout="pageDirection">
                <f:selectItems value="#{gensBean.listePersonnes()}" />
            </h:selectManyCheckbox>
        </fieldset>
    </h:panelGroup>
</h:panelGroup>

ça reste à tester ;)

22/01/2015, 10h46
daydream123

Merci, c'est bien une histoire de render et rendered à ajouter.
Seulement j'ai un problème avec les id. Car en gros, je dois avoir deux listes de cases à cocher. La deuxième est cachée. Si on clique sur une case de la première liste, une (seulement une, celle qui est en face) case à cocher apparaît de la seconde liste.
Je ne sais pas comment mettre les id à chaque case.
J'ai essayé de mettre var = "obj" et de mettre comme id = "obj.value" mais ça ne marche pas. Ça me met une erreur...
22/01/2015, 11h11
OButterlin

Peux-tu faire uns esquisse de ce que tu veux avoir comme rendu ?

Si je mets ce code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h:form id="formTest">
				<ui:repeat var="item" value="#{gensBean.listePersonnes()}" varStatus="loop">
				<h:selectBooleanCheckbox id="#{loop.index}" rendered = "..."/>
				<br />
			</ui:repeat>
			<br />
			<ui:repeat var="item" value="#{gensBean.listePersonnes()}" varStatus="loop">
				<h:selectBooleanCheckbox value="#{item.value}" id="_#{loop.index}" >
					<f:ajax event="click" render="loop.index"/>
				</h:selectBooleanCheckbox>
				<h:outputText value="#{item.label}" />
				<br />
			</ui:repeat>
		</h:form>

Avec ce code, il me dit: Empty id attribute is not allowed
Pourquoi?

22/01/2015, 12h09
OButterlin

Tu devrais passer par un objet encapsulant tes 2 valeurs liées et faire une boucle de chargement sur une liste de cet objet pour construire tes checkboxes...
22/01/2015, 12h22
daydream123

1 pièce(s) jointe(s)

Ok, merci, effectivement, ça marche mieux avec un <h:panelGroup>.
Une esquisse de ce que je veux en PJ.
Merci!
Pièce jointe 166974

En gros maintenant j'ai ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h:form id="formTest">
			<h:panelGroup id="groupePersonnesConfirmees">
				<ui:repeat var="item" value="#{gensBean.listePersonnesConfirmees()}" varStatus="loop">
					<h:selectBooleanCheckbox value="#{gensBean.mapPersonnesConfirmees[item]}" />
					<h:outputText value="#{item.label}" />
					<br />
				</ui:repeat>
			</h:panelGroup>
			<br />
			<h:panelGroup id="groupePersonnesPotentielles">
			<ui:repeat var="item" value="#{gensBean.listePersonnesPotentielles()}" varStatus="loop">
				<h:selectBooleanCheckbox value="#{gensBean.mapPersonnesPotentielles[item]}">
					<f:ajax execute="groupePersonnesPotentielles" event="click" render="groupePersonnesConfirmees" />
				</h:selectBooleanCheckbox>
				<h:outputText value="#{item.label}" />
				<br />
			</ui:repeat>
			</h:panelGroup>
		</h:form>

Mais rien en se passe quand je coche sur la première liste :?

22/01/2015, 14h23
daydream123

J'ai trouvé la solution par hasard :mrgreen:
J'ai mis

Code:

render="formTest:groupePersonnesConfirmees"

au lieu de

Code:

render="groupePersonnesConfirmees"

C'est quoi la différence entre les deux? mon id est bien unique...
22/01/2015, 14h33
OButterlin

Il doit être unique, mais il y a la notion de conteneur...
Certains composants sont des conteneurs, d'autres non. Par exemple, <h:form>, <h:tabView> ... sont des conteneurs
Dans ce cas, il faut donner le chemin complet (enfin, sauf si on est à l'intérieur du conteneur demandeur).
C'est souvent laborieux et je te suggère d'utiliser firebug pour voir l'id généré dans la page.
22/01/2015, 15h19
daydream123

D'accord merci pour l'explication :plusser:
Mon problème maintenant c'est que si je coche des cases dans la deuxième liste, dès que je coche une case de la première liste, ma seconde liste est réinitialisée, et du coup je perds les cases que j'ai cochées à la seconde...
22/01/2015, 15h58
OButterlin

Peux-tu montrer le code actuel ?
22/01/2015, 16h53
daydream123

J'ai fini par enregistrer côté serveur les cases cochées... Un peu compliqué de poster le code.
Merci de ton aide!
22/01/2015, 16h55
OButterlin

Oui, c'est un peu là que je voulais aller, j'avais vu dans le code initial que tu n'associais pas la valeur à ton managedBean, du coup, le rerender ne peut conserver son état...
Bref, c'est ok... c'est l'essentiel ;)