Pb avec 3 selectOneMenu imbriqués en utilsant ajax

Version imprimable

Bonjour,

Je débute en JSF et j'essaye de disposer dans une page xhtml:

1 premier composant selectOneMenu chargé "en dur" dans la page.
1 deuxième selectOneMenu chargé dynamiquement en fonction du choix dans le précédent
1 troisième selectOneMenu chargé lui aussi dynamiquement en fonction du choix du 2eme selectOneMenu

J'ai opté pour "ajaxisé" mes composants. Le premier sur ma première liste déroulante fonctionne bien et met bien à jour ma seconde liste déroulante. Le deuxième appel ajax est inopérant. Je ne comprends pas pourquoi.

Mon environnement: Glassfish 4.1, Primefaces 5.1, JSF 2.2 (Mojarra) et jdk 1.8.

Mon managedBean, annoté @Named, a un scope request.
Ci-dessous le code moa page xhtml:
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 <h:form id="monForm"> <p:panelGrid columns="2"> <p:outputLabel for="choix1" value="Choix 1" /> <p:selectOneMenu id="choix1" value="#{pageAMB.selectedChoix1}"> <p:ajax update="choix2" /> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItem itemValue="1" itemLabel="Ligne 1" /> <f:selectItem itemValue="2" itemLabel="Ligne 2" /> <f:selectItem itemValue="3" itemLabel="Ligne 3" /> <f:selectItem itemValue="4" itemLabel="Ligne 4" /> </p:selectOneMenu> <p:outputLabel for="choix2" value="Choix 2" /> <p:selectOneMenu id="choix2" value="#{pageAMB.selectedChoix2}"> <p:ajax update="choix3" /> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItems value="#{pageAMB.listChoix2}" /> </p:selectOneMenu> <p:outputLabel for="choix3" value="Choix 3" /> <p:selectOneMenu id="choix3" value="#{pageAMB.selectedChoix3}"> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItems value="#{pageAMB.listChoix3}" /> </p:selectOneMenu> </p:panelGrid>
Faudrait-il que je change le scope de mon managedBean ou que je fasse des submits ? ou autre chose ?
Merci pour votre aide

Bonjour,

Si ta seconde liste depend de la premiere alors il faudrait que tu modifie la balise p:ajax a la premiere liste comme suit :
Code:

1 2 3 4 5 6 7 8 <p:selectOneMenu id="choix1" value="#{pageAMB.selectedChoix1}"> <p:ajax event="change" process="@form" update="choix2"/> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItem itemValue="1" itemLabel="Ligne 1" /> <f:selectItem itemValue="2" itemLabel="Ligne 2" /> <f:selectItem itemValue="3" itemLabel="Ligne 3" /> <f:selectItem itemValue="4" itemLabel="Ligne 4" /> </p:selectOneMenu>
Faudrait que tu fasse aussi la meme chose dans la 2eme liste en lui donnant l'id de la 3eme

Code:

<p:ajax event="change" process="@form" update="choix3"/>

Merci pour ta réponse.
J'ai testé et ça ne fonctionne toujours pas à moins de changer le scope de mon backing bean de @RequestScope à @SessionScoped. Ce que je ne voulais pas faire.
Au passage je me suis rendue compte que j'avais omis : implements Serializable pour mon backing bean.

En repassant mon backing bean avec un scope @RequestScope. J'ai ajouté des logs pour observer ce qu'il se passe lors des différents aller-retour serveur:
Lors du chargement de ma page:
2015-06-10T20:51:27.143+0200|Infos: choix1 modifié chargement dynamique de liste 2 avec choix 1 = null
2015-06-10T20:51:27.144+0200|Infos: choix2 modifié chargement dynamique de liste 3 avec choix 2 = null
-> jusque là, normal!

Lors de la sélection d'une valeur dans choix1:
2015-06-10T20:51:54.164+0200|Infos: choix1 modifié chargement dynamique de liste 2 avec choix 1 = 1
-> yes ! it's working. Ma liste 2 se charge et me permet se sélectionner une valeur

Lors de la sélection d'une valeur dans choix2:
2015-06-10T20:52:00.807+0200|Infos: choix1 modifié chargement dynamique de liste 2 avec choix 1 = null
2015-06-10T20:52:00.807+0200|Infos: choix1 modifié chargement dynamique de liste 2 avec choix 1 = null
2015-06-10T20:52:00.807+0200|Infos: choix3 modifié chargement dynamique de liste 3 avec choix 2 = null
-> gloups ! Ma liste 3 est vide

De fait, ma liste 3 ne peut pas être chargée puisque choix2 est null.

Que puis-je faire de plus sans avoir à changer le scope de mon backing bean ?

Voici mon backing bean
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 47 48 49 50 51 52 @Named @RequestScoped public class PageAMB implements Serializable { private static Logger log = Logger.getLogger(PageAMB.class.getName()); private String selectedChoix1; private String selectedChoix2; private String selectedChoix3; private List<String> listChoix2 = new ArrayList<String>(); private List<String> listChoix3 = new ArrayList<String>(); // Getter(s) pour selectedChoix1, selectedChoix2 et selectedChoix3 public List<String> getListChoix2() { log.info("choix1 modifié chargement dynamique de liste 2 avec choix 1 = " + getSelectedChoix1()); if (getSelectedChoix1() != null) { switch (getSelectedChoix1()) { case "1": listChoix2.add("1.1 tata"); listChoix2.add("1.2 totot"); break; // la suite et fin du switch } return listChoix2; } public List<String> getListChoix3() { log.info("choix2 modifié chargement dynamique de liste 3 avec choix 2 = " + getSelectedChoix2()); if (getSelectedChoix2() != null) { // à la place d'un accès à la couche métier switch (getSelectedChoix2()) { case "1.1 tata": listChoix3.add("1.1.1 tatadssd"); listChoix3.add("1.1.2 tututgsdsdg"); break; // la suite du même style } return listChoix3; } // mes setters }
Merci pour vos réponses

ça progresse...

J'ai changé qq petites choses dans mon backing bean et ma page xhtml. Je me suis entre autres inspirée d'un post de facilus68 : http://www.developpez.net/forums/d15...n-dependances/

Dans ma page : modification de la ligne 16 et 22 en passant en paramètre le choix sélectionné dans le composant parent.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <p:outputLabel for="choix1" value="Choix 1" /> <p:selectOneMenu id="choix1" value="#{pageAMB.selectedChoix1}"> <p:ajax event="change" process="@form" update="choix2" /> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItem itemValue="1" itemLabel="Ligne 1" /> <f:selectItem itemValue="2" itemLabel="Ligne 2" /> <f:selectItem itemValue="3" itemLabel="Ligne 3" /> <f:selectItem itemValue="4" itemLabel="Ligne 4" /> </p:selectOneMenu> <p:outputLabel for="choix2" value="Choix 2" /> <p:selectOneMenu id="choix2" value="#{pageAMB.selectedChoix2}"> <p:ajax event="change" process="@form" update="choix3" /> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItems value="#{pageAMB.listChoix2(pageAMB.selectedChoix1)}" /> </p:selectOneMenu> <p:outputLabel for="choix3" value="Choix 3" /> <p:selectOneMenu id="choix3" value="#{pageAMB.selectedChoix3}"> <f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" /> <f:selectItems value="#{pageAMB.listChoix3(pageAMB.selectedChoix2)}" /> </p:selectOneMenu>
Pour mon backing bean, je l'ai passé en @ViewScoped qui est pour moi plus acceptable qu'en @SessionScoped. Ma page se comporte presque bien...à chaque nouveau clique sur ma liste de choix 2 et 3 pour choisir une nouvelle valeur, mes listes de valeurs se "doublonnent". J'ai ajusté en rajoutant la ligne 5 : listChoix2.clear() et listChoix3.clear(). Idem pour ma liste 3 sans rafraichir la liste 2.
Code:

1 2 3 4 5 6 7 8 9 10 public List<String> listChoix2(String pSelectedChoix1) { log.info("choix1 modifié chargement dynamique de liste 2 avec choix 1 = " + pSelectedChoix1); listChoix2.clear(); listChoix3.clear(); if (pSelectedChoix1 != null) { switch (pSelectedChoix1) {
Le comportement de ma page n'est pas encore tout à fait convenable lorsque je joue avec les listes, le rafraichissement entre elles n'est pas optimum. Je continue de chercher.

salut,
tu dois a chaque fois effacer la liste qui n´est plus affecte, je m´explique:

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
 
 
public List<String> getListChoix2()
	 {
		log.info("choix1 modifié chargement dynamique de liste 2 avec choix 1 = " + getSelectedChoix1());
		if (getSelectedChoix1() != null && !getSelectedChoix1().isEmpty())
		{
			switch (getSelectedChoix1())
			 {
			case "1":
				listChoix2.add("1.1 tata");
				listChoix2.add("1.2 totot");
				 break;
 
			// la suite et fin du switch
		}
                else
                  listChoix2.lear();
		return listChoix2;
	}
 
	public List<String> getListChoix3()
	{
		log.info("choix2 modifié chargement dynamique de liste 3 avec choix 2 = " + getSelectedChoix2());
		if (getSelectedChoix2() != null && !getSelectedChoix2().isEmplty())
		{
                        // à la place d'un accès à la couche métier
			switch (getSelectedChoix2())
			{
			case "1.1 tata":
				listChoix3.add("1.1.1 tatadssd");
				listChoix3.add("1.1.2 tututgsdsdg");
				break;
 
			//  la suite du même style
 
		}
                else
                {
                  listChoix3.clear();
                }
		return listChoix3;
	}

eric

Merci Eric mais avec mon backing bean désormais avec un scope @ViewScoped (javax.faces.view.ViewScoped) à part au chargement de ma page où mes listes sont à null (getSelectedChoix1(), getSelectedChoix2() et getSelectedChoix3()) par la suite je garde en mémoire chaque sélection.

J'ai fini par trouver comment faire. Il se trouve que le changement de ma première liste doit réinitialiser le reste de ma page donc je passe par un submit en utilisant les attributs:

Citation:

valueChangeListener="#{pageAMB.choix1Changed}" onchange="submit()"

dans mon composant <p:selectOneMenu id="choix1" ....

J'implémente alors dans mon backing bean la méthode choix1Changed comme suit

Code:

1
2
3
4
5
6
7
public void choix1Changed(ValueChangeEvent pEvent)
{
	setSelectedChoix2(null);
	setSelectedChoix3(null);
	listChoix2.clear();
	listChoix3.clear();
}

J'ai retiré a balise ajax de ma première liste aussi.

Je vous livre mon code de la page et du backing bean pour illustrer mieux mon exemple. Merci encore pour vos réponses!

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
<h:form id="monForm">
	<p:panelGrid columns="2">
 
	<p:outputLabel for="choix1" value="Choix 1" />
	<p:selectOneMenu id="choix1" value="#{pageAMB.selectedChoix1}" valueChangeListener="#{pageAMB.choix1Changed}" onchange="submit()">
		<f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" />
		<f:selectItem itemValue="1" itemLabel="Ligne 1" />
		<f:selectItem itemValue="2" itemLabel="Ligne 2" />
		<f:selectItem itemValue="3" itemLabel="Ligne 3" />
		<f:selectItem itemValue="4" itemLabel="Ligne 4" />
	</p:selectOneMenu>
 
	<p:outputLabel for="choix2" value="Choix 2" />
	<p:selectOneMenu id="choix2" value="#{pageAMB.selectedChoix2}">
		<p:ajax event="change" process="@form" update="choix3"/>
		<f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" />
		<f:selectItems value="#{pageAMB.listChoix2}" />
	</p:selectOneMenu>
 
	<p:outputLabel for="choix3" value="Choix 3" />
	<p:selectOneMenu id="choix3" value="#{pageAMB.selectedChoix3}">
		<f:selectItem itemValue="" itemLabel="*** Choisir ***" noSelectionOption="true" />
		<f:selectItems value="#{pageAMB.listChoix3}" />
	</p:selectOneMenu>
 
	</p:panelGrid>
</h:form>

Mon backing bean

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
@Named
@ViewScoped
public class PageAMB implements Serializable
{
	private static Logger log = Logger.getLogger(PageAMB.class.getName());
	private String selectedChoix1;
	private String selectedChoix2;
	private String selectedChoix3;
	private List<String> listChoix2 = new ArrayList<String>();
	private List<String> listChoix3 = new ArrayList<String>();
 
        // Getter et setter 
 
	public List<String> getListChoix2()
	{
		log.info("choix1 modifié chargement dynamique de liste 2 avec choix 1 = " + getSelectedChoix1());
 
		if (getSelectedChoix1() != null  && getSelectedChoix1().isEmpty() == false)
		{
			switch (getSelectedChoix1())
			{
			case "1":
				listChoix2.add("1.1 tata");
				listChoix2.add("1.2 totot");
				break;
 
			// la suite ...
 
			default:
				break;
			}
		}
		return listChoix2;
	}
 
	public List<String> getListChoix3()
	{
		log.info("choix2 modifié chargement dynamique de liste 3 avec choix 2 = " + getSelectedChoix2());
 
		listChoix3.clear();
		setSelectedChoix3(null);
 
		if (getSelectedChoix2() != null && getSelectedChoix2().isEmpty() == false)
		{
			switch (getSelectedChoix2())
			{
			case "1.1 tata":
				listChoix3.add("1.1.1 tatadssd");
				listChoix3.add("1.1.2 tututgsdsdg");
				break;
 
			// la suite ...
 
			default:
				break;
			}
		}
 
		return listChoix3;
	}
 
	public void choix1Changed(ValueChangeEvent pEvent)
	{
		setSelectedChoix2(null);
		setSelectedChoix3(null);
		listChoix2.clear();
		listChoix3.clear();
	}
}

Tchao