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!

[daydream123]

En gros maintenant j'ai ç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
<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

[daydream123]

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

Code :

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

render="formTest:groupePersonnesConfirmees"

au lieu de

Code :

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

render="groupePersonnesConfirmees"

C'est quoi la différence entre les deux? mon id est bien unique...

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

[daydream123]

D'accord merci pour l'explication
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...

[OButterlin]

Peux-tu montrer le code actuel ?

[daydream123]

J'ai fini par enregistrer côté serveur les cases cochées... Un peu compliqué de poster le code.
Merci de ton aide!

[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