RichFaces : FenêtreModal = Erreur JS

**chriscoolletoubibe** · 13/03/2010, 02h29

Salut les gens! j'ai un petit soucis avec RichFaces.
J'ai une application JEE5 avec JSF Facelet et Richfaces.

J'essaye de faire une fenêtre modale like:

Code :

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

1
2
3
4
5
6
7
8
 <a onclick="Richfaces.showModalPanel('pnl');" href="#">Show ModalPanel</a>
 
 
            <rich:modalPanel id="pnl" >
 
                <a onclick="Richfaces.hideModalPanel('pnl');" href="#">Hide ModalPanel</a>
 
            </rich:modalPanel>

mais quand je charge ma page web j'ai dans la console d'erreur JS les messages suivants:

Erreur*: ModalPanel is not defined
Fichier Source*: http://localhost:8080/leNomDeMonProjet-war/#
Ligne*: 285

et quand je clique sur lien pour ouvrir ma fenêtre modale j'ai se message en plus:

Erreur*: Richfaces is not defined
Fichier Source*: http://localhost:8080/leNomDeMonProjet-war/#
Ligne*: 1

Voila alors je tiens tout de suite à préciser que j'ai fait le test en enlevant tous mes scripts perso JS (histoire de m'assurer que je n'ai pas un conflit de nom dans une de mes fonctions javascript) et j'ai également les librairies nécessaires au bon fonctionnement de richfaces dans le répertoire lib de WEB-INF et évidement comme le précise la doc RichFaces mon appel de fenêtre modal n'est dans aucune balise form.

Quelqu'un à t'il une idée? (that would be very cool!)

Merci d'avance

**chriscoolletoubibe** · 14/03/2010, 18h16

up et précisions:
J'ai ajouté cela dans WEB.xml mais ça ne change rien:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <context-param>
        <param-name>org.richfaces.LoadScriptStrategy</param-name>
        <param-value>ALL</param-value>
    </context-param>
 
<param-name>org.ajax4jsf.handleViewExpiredOnClient</param-name>
    <param-value>true</param-value>
</context-param>
 
    <context-param>
        <param-name>org.richfaces.LoadScriptStrategy</param-name>
        <param-value>ALL</param-value>
    </context-param>

**Sniper37** · 15/03/2010, 11h15

tu peux montre le code de la modalPanel,
il y'a deux règles importantes à verifier:

1- modalPanel doit avoir son propre form.

2- le modalPanel ne doit pas être inclus dans un form.

**chriscoolletoubibe** · 15/03/2010, 16h08

Je suis au boulot, donc je mettrais l'intégralité du fichier en ligne ce soir. cependant je ne suis pas dans un form (j'ai le test directement dans mon template principal dans body. Et le nom est unique.

En fait je pense que le soucis vient du fait que l'application ne charge pas les librairies JS de Richfaces, à moins qu'il faille installer ces dernières manuellement?
Si oui ou les trouve t-on en téléchargement?

**Sniper37** · 15/03/2010, 16h33

non ça marche même avec les valeurs par défaut. Mais il faut définir une seule fois le paramètre du context org.richfaces.LoadScriptStrategy

**chriscoolletoubibe** · 15/03/2010, 16h38

Ouep effectivement je vais l'enlever et essayer à nouveau, je te tiendrai au courant.

Merci pour ton aide

**chriscoolletoubibe** · 16/03/2010, 00h17

Non toujours pas, l'erreur est la même...

Voici mon WEB.xml:

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
 
?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>/WEB-INF/proximeo.taglib.xml</param-value>
    </context-param>
    <context-param>
        <param-name>org.richfaces.LoadScriptStrategy</param-name>
        <param-value>ALL</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.verifyObjects</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.validateXml</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>client</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/pages/accueil.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

et voici mon face-config.xml

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
 
<?xml version='1.0' encoding='UTF-8'?>
 
<!-- =========== FULL CONFIGURATION FILE ================================== -->
 
<faces-config version="1.2" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <application>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>
    <navigation-rule>
        <from-view-id>*</from-view-id>
        <navigation-case>
            <from-outcome>signon</from-outcome>
            <to-view-id>/pages/user/signon.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <managed-bean>
        <managed-bean-name>pictureLoader</managed-bean-name>
        <managed-bean-class>com.proximeo.restaurant.tools.PictureLoader</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <lifecycle>
        <phase-listener>com.proximeo.restaurant.jsf.phaseListener.InitPhaseListener</phase-listener>
    </lifecycle>
    <referenced-bean>
        <referenced-bean-name>pictureloader</referenced-bean-name>
        <referenced-bean-class>com.proximeo.restaurant.tools.PictureLoader</referenced-bean-class>
    </referenced-bean>
</faces-config>

Voici template.xhtml

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
 
    <head>
        <link rel="stylesheet" type="text/css" href="styles/standard/main.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/header.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/content.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/bottom.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/box.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/form.css"/>
        <link rel="stylesheet" type="text/css" href="styles/standard/font.css"/>
        <script LANGUAGE="Javascript" SRC="scripts/button.js" type="text/javascript"/>
        <script LANGUAGE="Javascript" SRC="scripts/menu.js" type="text/javascript"/>
        <script LANGUAGE="Javascript" SRC="scripts/form.js" type="text/javascript"/>
        <title>Maquette</title>
    </head>
 
    <body onload="preload('#{pictureLoader.menuPictures}')">
 
        <f:view>
            <div id="header">
                <ui:insert name="header">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td rowspan="3" valign="top">
 
                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td style="height:59px"></td></tr>
                                    <tr><td class="frame-under-h"></td></tr>
                                    <tr><td class="frame-under-h-pix"></td></tr>
                                </table>
 
                            </td>
                            <td colspan="2" style="height:159px;width:848px" valign="top"><img src="pictures/ihm/title.jpg" width="848" height="159" alt="title"/></td>
                            <td rowspan="3" style="width:127px" valign="top"><img src="pictures/ihm/people.jpg" width="127" height="198" alt="people"/></td>
                            <td rowspan="3"  valign="top">
 
                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td style="height:59px"></td></tr>
                                    <tr><td class="frame-under-h"></td></tr>
                                    <tr><td class="frame-under-h-pix"></td></tr>
                                </table>
 
                            </td>
 
                        </tr>
                        <tr>
                            <td rowspan="2" class="header-left-under"></td>
                            <td class="content" style="width:829px;height:23px"></td>
                        </tr>
                        <tr>
                            <td class="header-center-under"></td>
                        </tr>
 
                    </table>
                </ui:insert>
            </div>
            <div id="menu">
                <ui:insert name="menu">
                    <ui:include src="menu.xhtml"/>
                </ui:insert>
            </div>
 
            <div id="content">
 
                <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td/>
                        <td class="mainleft"></td>
                        <td rowspan="4" class="content" width="180">
                            <ui:insert name="connexionBox"/>
                        </td>
                        <td rowspan="4" class="content" width="766">
                            <ui:insert name="content"/>
                        </td>
                        <td class="mainright"></td>
                        <td/>
                    </tr>
                    <tr>
                        <td class="main-c-frame"></td>
                        <td class="mainleft-c"></td>
                        <td class="mainright-c"></td>
                        <td class="main-c-frame"></td>
                    </tr>
                    <tr>
                        <td class="frame-under-c-pix"></td>
                        <td class="mainleft-under-c"></td>
                        <td class="mainright-under-c"></td>
                        <td class="frame-under-c-pix"></td>
                    </tr>
                    <tr>
                        <td/>
                        <td class="mainleft"></td>
                        <td class="mainright"></td>
                        <td/>
                    </tr>
                    <tr>
                        <td/>
                        <td class="beetweenCB-left"/>
                        <td colspan="2" class="beetweenCB-center"></td>
                        <td class="beetweenCB-right"/>
                        <td/>
                    </tr>
                </table>
            </div>
 
            <div id="bottom">
                <ui:insert name="bottom">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td class="bottom-left"></td>
                            <td class="content"></td>
                            <td class="bottom-right"></td>
                        </tr>
                        <tr>
                            <td class="bottom-under-left"></td>
                            <td class="bottom-under-center"></td>
                            <td class="bottom-under-right"></td>
                        </tr>
                    </table>
                </ui:insert>
            </div>
        </f:view>
    </body>
</html>

et voici mon accueil.xhtml dans lequel j'invoque le dieu de la fenêtre modale:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
    <ui:composition template="/templates/template.xhtml"  xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:rich="http://richfaces.org/rich"
                    xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:pe="http://www.proximeo.com/taglib">
 
        <ui:define name="connexionBox">
            <a onclick="Richfaces.showModalPanel('pnl');" href="#">Show ModalPanel</a>
 
 
            <rich:modalPanel id="pnl" >
 
                <a onclick="Richfaces.hideModalPanel('pnl');" href="#">Hide ModalPanel</a>
 
            </rich:modalPanel>
            <h:form>
                <table class="box" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="box-top-left"/>
                        <td class="box-top"/>
                        <td class="box-top-right"/>
                    </tr>
                    <tr>
                        <td rowspan="5" class="box-left"/>
                        <td>
                            <pe:inputTextArea name="test" title="email" value="votre@email.ici" size="17"/>
                        </td>
                        <td rowspan="5" class="box-right"/>
                    </tr>
                    <tr>
                        <td>
                            <pe:inputPasswordArea name="pass" title="website password" value="********" size="17"/>
                        </td>
                    </tr>
                    <td class="box-content-c">
                        <h:commandLink action="signon">Mot de passe oublié?</h:commandLink>
                    </td>
                    <tr>
                        <td class="box-content-c" align="center">
                            <pe:button id="connect1" size="70" value="Connexion" action="" align="center" 
                                       srcImageUp="pictures/ihm/button/fr/button-connection-up.jpg" srcImageDown="pictures/ihm/button/fr/button-connection-down.jpg"/>
 
                        </td>
                    </tr>
                    <tr>
                        <td class="box-content-c">
                            <a onclick="displayConnexionForm();">Pas encore de compte?</a>
 
                        </td>
                    </tr>
                    <tr>
                        <td class="box-bottom-left"/>
                        <td class="box-bottom"/>
                        <td class="box-bottom-right"/>
                    </tr>
                </table>
            </h:form>
 
        </ui:define>
 
        <ui:define name="content">
 
 
 
        </ui:define>
 
    </ui:composition>
 
</html>

Dite moi que vous avez trouvé mon erreur (j'aimerai autant que ca ne soit pas un bug exotique de RichFaces...)

**Sniper37** · 16/03/2010, 11h57

entoure le lien qui ouvre le modalPanel avec un h:form,

et essaye d'utiliser server dans le javax.faces.STATE_SAVING_METHOD, si tu as un problème de laod de scripts, tu aura des problèmes avec d'autres composants, comme comboBox ou les filtres.

**chriscoolletoubibe** · 16/03/2010, 12h49

J'ai tenté les deux solutions mais ca ne change rien à mon problème. L'erreur javascript est toujours présente...

**Sniper37** · 16/03/2010, 12h57

Envoyé par chriscoolletoubibe

J'ai tenté les deux solutions mais ca ne change rien à mon problème. L'erreur javascript est toujours présente...

tu peux être plus précis, elle survient quand l'erreur?? sur le click? les autres composants Richfaces fonctionnent bien ??
tu peux regarder avec Firebug, si les scipts sont bien loadés, et ta fonction dans le onload??

autre chose dans le onlick, il vaut mieux faire:

Code :

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

onclick="javascript:Rihfaces.showModalPanel('mdp')" ;

**chriscoolletoubibe** · 16/03/2010, 13h15

ma fonction dans le onload fonctionne bien (elle récupère l'emplacement de mes images les précharge dans le navigateur).

Quand je dis que j'ai tenté les deux solutions: j'ai en fait ajouté mon lien d'appel à la fenêtre modale dans un form et j'ai fait la modification dans le web.xml. (comme tu m'avais conseillé dans le post précèdent).

En fait l'erreur

Erreur*: ModalPanel is not defined
Fichier Source*: http://localhost:8080/leNomDeMonProjet-war/#
Ligne*: 285

apparait au chargement et l'erreur

Erreur*: Richfaces is not defined
Fichier Source*: http://localhost:8080/leNomDeMonProjet-war/#
Ligne*: 1

au moment du clique sur le lien.
Au début je m'étais dis : "bon ça vient d'un conflit avec le nom d'une de mes fonctions javascript" donc j'ai fait la tentative en retirant tout le code javascript perso, mais ca ne fonctionnait pas mieux.

Non, firebug n'affiche pas les librairies richfaces (j'avais déjà regardé) ca confirme bien que mes classes ne sont pas chargées... mais la question est "why?"

**Sniper37** · 16/03/2010, 15h34

quelles sont les librairies que tu utilises?? les autres composants Richfaces fonctionnent? la comboBox par exemple..

**chriscoolletoubibe** · 16/03/2010, 15h53

Je viens de trouver... en fait avec le filtre dans le web.xml ca marche beaucoup mieux... j'ai comparé un de mes projet sous RAD7 avec celui ci (sous netbeans) et en fait je me suis rendu compte de la différence entre mes fichiers web.xml.... Erf voici comment un oubli peu vous plomber un weekend

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<filter>
		<display-name>RichFaces Filter</display-name>
		<filter-name>richfaces</filter-name>
		<filter-class>org.ajax4jsf.Filter</filter-class>
	</filter>
 
	<filter-mapping>
		<filter-name>richfaces</filter-name>
		<servlet-name>Faces Servlet</servlet-name>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
		<dispatcher>INCLUDE</dispatcher>
	</filter-mapping>

en tout cas merci à toi pour l'interet et l'aide apportés à ma question.

J'ai juste encore un petite question (dont je suis sure que je vais trouver la réponse sous google facilement mais bon... au moins elle sera aussi sur developpez.com

)
A quoi sert javax.faces.STATE_SAVING_METHOD ?