Discussion :

[c.t.k]

Bonjour à tous et merci à la communauté pour les aides que vous apportez à travers vos différentes discussion.

Je suis entrain de réaliser un petit formulaire en JSP en utilisant les composants RichFaces.

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
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
 
<h:form>
        <div class="zoneEditor">
            <h:panelGrid columns="2">
                ....
            </h:panelGrid>
        </div>
 
        <div class="zoneEditor">
            <h:panelGrid columns="4">
               ....
            </h:panelGrid>
 
            <h:panelGrid columns="2">
                ....
            </h:panelGrid>
 
            <%-- PARTIE VILLE --%>
           <%--<a4j:outputPanel layout="block">--%>
           <h:panelGrid columns="3">
 
                    <a4j:outputPanel layout="block">
                       <%-- <h:form id="test"> --%>
                            <h:outputText  value="Code postal : "/>
                            <h:inputText id="codePostal" label="codePostal" value="#{companymb.city.codePostal}">
                                <f:validateLength maximum="5" minimum="4"/>
                                <a4j:support event="onchange" reRender="out2" />
                            </h:inputText>
                     <%-- </h:form> --%>
                    </a4j:outputPanel>
 
                   <a4j:outputPanel id="out2" ajaxRendered="true">
                      Ville : <h:outputText id="ville" rendered="#{not empty companymb.city.codePostal}" value="#{companymb.test}" />
                   </a4j:outputPanel>
 
                    <a4j:outputPanel ajaxRendered="true">
                        <h:message for="codePostal" style="color:red" />
                    </a4j:outputPanel>
               <%-- </a4j:outputPanel>--%>
            </h:panelGrid>
            <%-- FIN PARTIE VILLE --%>
 
            <h:panelGrid columns="4">
               .....
            </h:panelGrid>
        </div> 
 
        <div class="zoneButton">
            <h:commandButton type="submit" action="#{companymb.createCompany}" value="Ajouter cette entreprise"/>
        </div>
    </h:form>

Ce morceau de code a pour but de créer une entreprise dans une base de donnée.

Ce qui me pose problème c'est la partie ville. En gros, l'utilisateur rentre le code postal de l'entreprise et je retrouve le nom de la ville (grâce à #{companymb.test}) que j'affiche.
Donc dès que l'utilisateur à taper les 4 ou 5 chiffres du code postal et qu'il quitte le champ "codePostal", j'affiche la ville si je la trouve (sinon renvoie d'un message d'erreur).

Or le "reRender="out2" ne se fait pas et j'ai pas d'idée du pourquoi.

J'ai essayé de mettre la partie ville, à l'extérieur du form actuel et réactivé les balises form qui sont en commentaire et la ça fonctionne.

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
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
 
<h:form>
        <div class="zoneEditor">
            <h:panelGrid columns="2">
                ....
            </h:panelGrid>
        </div>
 
        <div class="zoneEditor">
            <h:panelGrid columns="4">
               ....
            </h:panelGrid>
 
            <h:panelGrid columns="2">
                ....
            </h:panelGrid>
 
            <h:panelGrid columns="4">
               .....
            </h:panelGrid>
        </div> 
 
        <div class="zoneButton">
            <h:commandButton type="submit" action="#{companymb.createCompany}" value="Ajouter cette entreprise"/>
        </div>
 
</h:form>
 
<%-- PARTIE VILLE --%>
           <%--<a4j:outputPanel layout="block">--%>
           <h:panelGrid columns="3">
 
                    <a4j:outputPanel layout="block">
                       <h:form id="test"> 
                            <h:outputText  value="Code postal : "/>
                            <h:inputText id="codePostal" label="codePostal" value="#{companymb.city.codePostal}">
                                <f:validateLength maximum="5" minimum="4"/>
                                <a4j:support event="onchange" reRender="out2" />
                            </h:inputText>
                     </h:form> 
                    </a4j:outputPanel>
 
                   <a4j:outputPanel id="out2" ajaxRendered="true">
                      Ville : <h:outputText id="ville" rendered="#{not empty companymb.city.codePostal}" value="#{companymb.test}" />
                   </a4j:outputPanel>
 
                    <a4j:outputPanel ajaxRendered="true">
                        <h:message for="codePostal" style="color:red" />
                    </a4j:outputPanel>
               <%-- </a4j:outputPanel>--%>
            </h:panelGrid>
            <%-- FIN PARTIE VILLE --%>
 
<%-- CE CODE FONCTIONNE --%>

Ma question est donc comment faire fonctionner le reRender dans mon formulaire original et sans le mettre à l'extérieur du form ?

Merci de vos réponses.

[tchize_]

pour pouvoir être la cible d'un rerender, un composant doit être présent dans la page d'origne (pour que le javascript puisse le remplacer par la nouvelle version du serveur). Hors, avec ce ajaxrendered=true, le composant n'est pas présent sur la page de base, uniquement dans les réponses ajax. La solution serait la suivante:

Code :

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

1
2
3
4
5
                   <a4j:outputPanel id="out2">
                                      <a4j:outputPanel ajaxRendered="true">
                      Ville : <h:outputText id="ville" rendered="#{not empty companymb.city.codePostal}" value="#{companymb.test}" />
                                      </a4j:outputPanel>
                   </a4j:outputPanel>

ainsi, out2 existe pour le navigateur et peux rempalcer son contenu vide par son nouveau contenu.

[c.t.k]

Merci pour la réponse rapide

J'ai testé avec ce code et je n'ai toujours pas d'affichage

Ce que je ne comprends pas, c'est que ce code:

Code :

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

1
2
3
4
 
 <a4j:outputPanel ajaxRendered="true">
           <h:message for="codePostal" style="color:red" />
 </a4j:outputPanel>

fonctionne très bien (si je tape que 3 chiffres, il m'affiche bien une erreur lorsque je sors du champ)

Mais j'ai rien avec celuil-la :

Code :

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

1
2
3
4
5
6
 
<a4j:outputPanel id="out2">
     <a4j:outputPanel ajaxRendered="true">
         Ville : <h:outputText id="ville" rendered="#{not empty companymb.city.codePostal}" value="#{companymb.test}" />
      </a4j:outputPanel>
</a4j:outputPanel>

Une indication : avec Firebug, je vois bien la requête Ajax ce faire vers le serveur.

[tchize_]

out2 est bien présent dans la réponse? Avec le bon ID ?

[c.t.k]

J'ai trouvé d'où venait l'erreur !!

Voici le code qui pose problème (en rouge):

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 <h:form>
   <h:panelGrid columns="3">

        <a4j:outputPanel layout="block">

              <h:outputText  value="Code postal : "/>
              <h:inputText id="codePostal" label="codePostal" value="#{companymb.city.codePostal}">
              <f:validateLength maximum="5" minimum="4"/>
              <a4j:support event="onchange" reRender="out2" />
           </h:inputText>

        </a4j:outputPanel>

        <a4j:outputPanel id="out2">
                Ville : <h:outputText id="ville" rendered="#{not empty companymb.city.codePostal}" value="#{companymb.test}" />
         </a4j:outputPanel>

         <a4j:outputPanel ajaxRendered="true">
              <h:message for="codePostal" style="color:red" />
         </a4j:outputPanel>
    </h:panelGrid> 
   </div>      

   <div class="zoneEditor">
        <h3>
            Création du contact 
        </h3>

        <h:panelGrid columns="2">
            <h:outputText value="Nom : "/>
            <h:inputText id="nomContact" value="#{companymb.contact.lastName}" label="Nom" />

            <h:outputText value="Prénom : "/>
            <h:inputText id="prenomContact" value="#{companymb.contact.firstName}" 
          label="Prenom" required="true"/>
     </h:panelGrid>
   </div>


     <div class="zoneButton">
         <h:commandButton type="submit" action="#{companymb.createCompany}" value="Ajouter cette entreprise"/>
     </div>

</h:form>

Si je remplie le champ input sur lequel se trouve le "required=true", le nom de la ville s'affiche correctement.

J'en déduis qu'avec le "required=true" sur un inputText, le ré-affichage du formulaire est bloqué ou quelque chose comme ça.

C'est bon à savoir

Mais ça n'explique par pourquoi ce code :

Code :

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

1
2
3
4
 
<a4j:outputPanel ajaxRendered="true">
                        <h:message for="codePostal" style="color:red" />
                    </a4j:outputPanel>

est affiché même avec le le "required=true" sur un inputText.

En tout cas, merci tchize_, ton explication m'a permis de bien avancer.

[tchize_]

avec le required=true, les données ne sont pas transférées au backing bean, donc probablement que ton rendered conditionnel deviens false. Par contre tu aurais du avoir le texte qui précède.

[c.t.k]

En parlant du texte qui précède, tu parles du mot "Ville : " ? Car il apparait constamment, ce n'est pas un bon moyen de voir ce qui se passe.

Mais ton analyse est correcte. L'action sur le "onchange" est bien exécute (je vois bien la requête passée) mais elle n'arrive pas jusqu'à l'affichage donc rendered ne se fait plus.