Discussion :

[doons]

Bonjour,

J'ai formulaire de saisie d'une identité.
Cette identité est rattachée à un objet "Pays", sélectionnable avec un composant autocomplete.
Suivant le pays sélectionné, j'aimerais afficher différents champs de saisie.

En fait, si l'utilisateur sélectionne "Suisse", j'aimerais afficher un autre champ autocomplete pour sélectionner une localité enregistrée dans le système.
Si l'utilisateur choisi tout autre pays, j'aimerais afficher un inputText pour qu'il puisse saisir à la main le nom de la localité.
Le tout dynamiquement bien sûr, à chaque changement de pays il faut réafficher le bon champ de saisie de la localité.

Pour cela, j'avais fais ceci :

Code :

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

1
2
3
<p:autoComplete id="pays" onchange="submit();" value="#{saisirIdentiteForm.pays}" completeMethod="#{saisirIdentiteForm.completePays}"
          var="pays" itemLabel="#{pays}" itemValue="#{pays.id}" converter="PaysConverter" forceSelection="true" size="25" />

Le problème est que mon converter pète ici car la valeur n'est pas un Integer mais un String :

Code :

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

1
2
3
4
5
6
7
8
9
10
public Object getAsObject(FacesContext context, UIComponent component, String value) {
	if (value != null) {
		PaysManagedBean paysMB = context.getApplication()
				.evaluateExpressionGet(context, "#{paysManagedBean}", PaysManagedBean.class);
		return paysMB.getMapPays().get(Integer.valueOf(value));
	}
		
	return null;
}

Si j'enlève

Code :

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

onchange="submit();"

du champ autocomplete, ça passe tout bien. Le problème est que mon formulaire ne se met pas à jour et j'ai toujours le même champ de sélection de localité.

Je comprends bien que le problème vient de "onChange" qui envoie la valeur de ce que je saisis avant d'avoir sélectionné le Pays et du coup n'envoie pas

Code :

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

itemValue="#{pays.id}"

mais ce qui est saisi dans le champ (par ex: "Fra"). Mais onComplete n'est pas disponible pour le champ autocomplete....

J'ai aussi essayer avec un selectOneMenu :

Code :

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

1
2
3
4
 
<p:selectOneMenu id="pays" value="#{saisirMandatForm.pays}" converter="PaysConverter" style="width:200px" onchange="submit();">
      <f:selectItems value="#{saisirMandatForm.listPays}" var="pays" itemLabel="#{pays.nom}" itemValue="#{pays.id}" />
</p:selectOneMenu>

Mais j'obtiens l'erreur de validation suivante (je ne vois vraiment pas pourquoi):

saisirMandatForm:pays : erreur de validation. La valeur est incorrecte.

Qqun a-t-il une solution pour régler ce problème ?
Merci pour votre aide

[ziad.shady]

Le problème vient du itemLabel et itemValue. Ils sont inversés.

1. Remplace onchange="submit();" par <p:ajax event="itemSelect" listener="#{backingBean.tonListener}" />. Cela t'évitera à envoyer tout ton formulaire mais uniquement les composants primefaces que tu souhaiterais mettre à jour.
2. inverse ton itemLabel et itemValue à savoir : itemValue ="#{pays}" itemLabel="#{pays.libelle}"
3. Ajout un rendred sur le inputTexe de ta localité : <p:inputText id="txtSuisseLocalite" rendred=#{backingBean.codePays == 'Suisse'} value="" /> <p:inputText id="txtHorsSuisseLocalite" rendred=#{backingBean.codePays != 'Suisse'} value="" />

--
Ziad,

[doons]

Salut,

merci pour ta réponse

Mais qu'est-ce que je mets dans le listener ? Ce que je veux c'est réafficher le formulaire en affichant/cachant certains champs en fonction de la sélection du pays (j'ai bien rendered="..." sur les composants, il faut juste recharger la page quand la valeur de pays est changée.

Et il y a un ordre pour les paramètres itemValue ="#{pays}" itemLabel="#{pays.libelle}" ? Je ne savais pas

[ziad.shady]

Ce que je veux c'est réafficher le formulaire en affichant/cachant certains champs en fonction de la sélection du pays

Justement l'idée derrière <p:ajax> c'est de rafraîchir uniquement tes deux inputText. Tu n'as pas besoin de rafraichir toute ta page en utilisant onchange="submit();". Mais tu peux le laisser ça marchera aussi si tu veux absolument rafraîchir toute ta page (dans ce cas là tu n'as pas besoin d'utiliser <p:ajax>).

Et il y a un ordre pour les paramètres itemValue ="#{pays}" itemLabel="#{pays.libelle}" ? Je ne savais pas

Je n'ai jamais parlé d'ordre. Ce que j'entends dire par "inversé" c'est que la value tu l'as bindé avec le libellé et le libellé tu l'as bindé avec la value. Voici ce que tu as posté :

Code :

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

<p:autoComplete value="#{saisirIdentiteForm.pays}" var="pays" itemLabel="#{pays}" itemValue="#{pays.id}"/>

Voici ce que j'ai écrit dans ma réponse :

itemValue ="#{pays}" itemLabel="#{pays.libelle}"

itemValue doit être "#{pays}" car c'est l'objet "Pays" que tu bindes dans ton value "#{saisirIdentiteForm.pays}". Or, toi ce que tu mettais dans ton itemValue c'est un ID.

[doons]

ok je comprends mieux :-)

Par contre, tu dis

Justement l'idée derrière <p:ajax> c'est de rafraîchir uniquement tes deux inputText. Tu n'as pas besoin de rafraichir toute ta page en utilisant onchange="submit();". Mais tu peux le laisser ça marchera aussi si tu veux absolument rafraîchir toute ta page (dans ce cas là tu n'as pas besoin d'utiliser <p:ajax>).

Mais je vois pas ou ni comment lui dire que c'est ces deux inputText qu'il faut rafraichir.
J'ai essayé ça mais ca ne rafraichis pas l'affichage des composants:

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
 
<p:autoComplete id="pays" value="#{saisirIdentiteForm.pays}" completeMethod="#{saisirIdentiteForm.completePays}"
             var="pays" itemValue="#{pays}" itemLabel="#{pays.nom}" converter="PaysConverter" size="25" >
     <p:ajax event="itemSelect" update="saisirIdentiteForm:localite, saisirIdentiteForm:codePostalLibre, saisirIdentiteForm:localiteLibre" />
</p:autoComplete>
 
<h:outputLabel for="localite" value="@#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" />
<p:autoComplete id="localite" value="#{saisirIdentiteForm.localite}" rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" completeMethod="#{saisirIdentiteForm.completeLocalite}"
        var="loc" itemLabel="#{loc}" itemValue="#{loc.id}" converter="LocaliteConverter" forceSelection="true" size="26" />
 
<h:outputLabel for="codePostalLibre" value="#{msg['CodePostal']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="codePostalLibre" value="#{saisirIdentiteForm.codePostalLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />
 
<h:outputLabel for="localiteLibre" value="#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="localiteLibre" value="#{saisirIdentiteForm.localiteLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />

itemValue doit être "#{pays}" car c'est l'objet "Pays" que tu bindes dans ton value "#{saisirIdentiteForm.pays}". Or, toi ce que tu mettais dans ton itemValue c'est un ID.

Ce n'est pas justement le boulot du converter ?

[ziad.shady]

J'ai essayé ça mais ca ne rafraichis pas l'affichage des composants:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p:autoComplete id="pays" value="#{saisirIdentiteForm.pays}" completeMethod="#{saisirIdentiteForm.completePays}"
             var="pays" itemValue="#{pays}" itemLabel="#{pays.nom}" converter="PaysConverter" size="25" >
     <p:ajax event="itemSelect" update="saisirIdentiteForm:localite, saisirIdentiteForm:codePostalLibre, saisirIdentiteForm:localiteLibre" />
</p:autoComplete>
 
<h:outputLabel for="localite" value="@#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" />
<p:autoComplete id="localite" value="#{saisirIdentiteForm.localite}" rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" completeMethod="#{saisirIdentiteForm.completeLocalite}"
        var="loc" itemLabel="#{loc}" itemValue="#{loc.id}" converter="LocaliteConverter" forceSelection="true" size="26" />
 
<h:outputLabel for="codePostalLibre" value="#{msg['CodePostal']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="codePostalLibre" value="#{saisirIdentiteForm.codePostalLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />
 
<h:outputLabel for="localiteLibre" value="#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="localiteLibre" value="#{saisirIdentiteForm.localiteLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />

Dans l'attribut update du <p:ajax>
1. Enlève le préfixe saisirIdentiteForm:
2. Sépare les composant à rafraîchir par un simple "espace" pas de "virgule".

Ce n'est pas justement le boulot du converter ?

Grosso modo le converter te permet de MANIPULER directement tes objets dans les composants JSF, sans passer par ses attributs pour le binding.

[doons]

Dans l'attribut update du <p:ajax>
1. Enlève le préfixe saisirIdentiteForm:
2. Sépare les composant à rafraîchir par un simple "espace" pas de "virgule".

Code :

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

<p:ajax event="itemSelect" update="localite localiteLibre codePostalLibre" />

Code :

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

1
2
3
4
5
6
7
8
9
 
<p:autoComplete id="localite" value="#{saisirIdentiteForm.localite}" rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" completeMethod="#{saisirIdentiteForm.completeLocalite}"
                       		var="loc" itemLabel="#{loc}" itemValue="#{loc}" converter="LocaliteConverter" forceSelection="true" size="26" />
 
<h:outputLabel for="codePostalLibre" value="#{msg['CodePostal']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="codePostalLibre" value="#{saisirIdentiteForm.codePostalLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />
 
<h:outputLabel for="localiteLibre" value="#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="localiteLibre" value="#{saisirIdentiteForm.localiteLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />

Ca ne change rien, rien ne se passe

[ziad.shady]

Je ne suis pas certains de bien comprendre ce que tu voulais faire.

Mais si je comprends bien tu veux afficher conditionnellement SOIT ton <p:autocomplete> SOIT tes deux <p:inputText> et <p:outputLabel>. Ma question c'est depuis quelle action veux tu les rafraîchir?

Tel que je vois ton code, tu ne peux en aucun cas rafraichir tes deux <p:inputText> et <p:outputLabel> depuis ton <p:autocomplete> vue la condition que tu définis dans le rendred.

[doons]

Alors,

L'autocomplete "pays" est déclencheur de l'action

Code :

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

1
2
3
4
5
 
<p:autoComplete id="pays" value="#{saisirIdentiteForm.pays}" completeMethod="#{saisirIdentiteForm.completePays}"
             var="pays" itemValue="#{pays}" itemLabel="#{pays.nom}" converter="PaysConverter" size="25" >
     <p:ajax event="itemSelect" update="saisirIdentiteForm:localite, saisirIdentiteForm:codePostalLibre, saisirIdentiteForm:localiteLibre" />
</p:autoComplete>

En fonction de sa valeur, il faut soit afficher cet autocomplete avec l'outputText

Code :

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

1
2
3
4
 
<h:outputLabel for="localite" value="@#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" />
<p:autoComplete id="localite" value="#{saisirIdentiteForm.localite}" rendered="#{saisirIdentiteForm.pays.abrege == 'CH'}" completeMethod="#{saisirIdentiteForm.completeLocalite}"
	var="loc" itemLabel="#{loc}" itemValue="#{loc}" converter="LocaliteConverter" forceSelection="true" size="26" />

Soit les champs suivants

Code :

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

1
2
3
4
5
6
 
<h:outputLabel for="localiteLibre" value="#{msg['Localite']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="localiteLibre" value="#{saisirIdentiteForm.localiteLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />
 
<h:outputLabel for="codePostalLibre" value="#{msg['CodePostal']} : " rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" />
<p:inputText id="codePostalLibre" value="#{saisirIdentiteForm.codePostalLibre}" rendered="#{saisirIdentiteForm.pays.abrege != 'CH'}" size="50" maxlength="100" style="width:200px" />

La condition du rendered dit qu'il faut afficher certains en fonction de la valeur de l'abrégé du pays

[doons]

un petit up au cas ou qqun aurait une idée