RichFaces : FenêtreModal = Erreur JS

Version imprimable

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:

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:

Citation:

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:

Citation:

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

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

Code:

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>

15/03/2010, 10h15
Sniper37

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.
15/03/2010, 15h08
chriscoolletoubibe

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?
15/03/2010, 15h33
Sniper37

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
15/03/2010, 15h38
chriscoolletoubibe

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

Merci pour ton aide :)

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

Voici mon WEB.xml:

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
 
?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:

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:

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:

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

16/03/2010, 10h57
Sniper37

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.
16/03/2010, 11h49
chriscoolletoubibe

J'ai tenté les deux solutions mais ca ne change rien à mon problème. L'erreur javascript est toujours présente... :cry:
16/03/2010, 11h57
Sniper37

Citation:

Envoyé par chriscoolletoubibe

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

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:

onclick="javascript:Rihfaces.showModalPanel('mdp')" ;
16/03/2010, 12h15
chriscoolletoubibe

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

Citation:

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

apparait au chargement et l'erreur

Citation:

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?"
16/03/2010, 14h34
Sniper37

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

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:

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 ?

16/03/2010, 14h58
Sniper37

sans le filtre, rien ne peux fonctionner, pas que le modalPanel :)..
Pour ta question, tu trouvera un début de réponse ici sur developpez.com bien sur..
16/03/2010, 15h08
chriscoolletoubibe

Merci à toi ,-)
++