Discussion :

[daydream123]

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 :

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
<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!

[OButterlin]

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 :

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
<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>

[OButterlin]

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 :

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
<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

[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...

[OButterlin]

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

[daydream123]

Si je mets ce code:

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
<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?

[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...

[daydream123]

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