Discussion :

[Roger_Rabbit]

Bonjour,

je suis un débutant en JSF / Beans et même javascript... et comme j'utilise un peu de tout ça, mon problème pourrait être fort stupide (et surtout mal formulé : ce qui explique l'échec de mes recherches pour trouver un problème similaire existant et résolu).
Mais dans l'impasse, je préfère avoir l'air bête 5 minutes, donc allons-y:

je dispose d'une datatable qui a pour valeur une table mappée avec son équivalent dans un bean (scope = request).
Depuis cette table, j'exécute une commande qui me permet de supprimer l'ensemble des lignes sélectionnées (au moyen de checkboxs). Afin d'éviter les bourdes, j'émets un formulaire (modal) de validation, et si le "oui" est cliqué, j'appelle la méthode doDeleteAllSelected() de mon bean...
Le problème est que le formulaire modal de validation n'a plus les informations mises à jour de mes lignes (checkbox toutes à "false" à la place). Si à la place je fais l'appel à la fonction de doDeleteAllSelected() directement depuis le formulaire dans lequel est la datatable, ça fonctionne bien..

J'ai donc deux options :

• j'arrive à transmettre l'état de mes lignes à l'intérieur du formulaire modal de validation
• je trouve le moyen d'obtenir une valeur de retour de mon formulaire ("yes" ou "no") et j'exécute la méthode doDeleteAllSelected() en conséquence...

Seulement, je ne sais comment faire ni l'un ni l'autre... donc, si vous avez des idées...

Dans tous les cas, merci de m'avoir au moins lu jusque là!

PS : (le scope ne peut pas changer, donc rendre le bean persistant n'est malheureusement pas une solution)

la datatable (à l'intérieur de mon formulaire principal)

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
      <rich:dataTable
            value="#{Data.allDatas}"
            var="varData"
            rowKeyVar="row"
            rows="30"
            id="tableData"
            columns="9"
            columnsWidth="2%,13%,14%,3%,5%,13%,23%,10%,13%"
            styleClass="default"
            captionClass="captiontitle"
            columnClasses="novisible, selected, field1, field2, field3, field4, field5, field6, field7, field8">
            <f:facet name="caption">
            <h:panelGroup >
                <h:outputText value="#{bundle.Data_form_list}" />
				<h:outputText value="#{bundle.Data_form_escape_caracter}" escape=""/>
			    <a4j:commandLink
			    	ajaxSingle="false"
                    id="deleteAllSelected"
                    oncomplete="#{rich:component('deleteSelectedDatasPanel')}.show();"
                    styleClass="btn-action delete"
                    title="#{bundle.Data_form_tooltip_multi_delete}"
                    status="DataRegion">
					<f:setPropertyActionListener
                       value="false"
                       target="#{Data.isAllSelected}" />
                </a4j:commandLink>
              </h:panelGroup>
            </f:facet>
            <rich:column
                width="0%"
                visible="false">
                <f:facet name="header">
                    <h:outputText value="#{bundle.Data_form_id}" />
                </f:facet>
                <h:outputText
                    value="#{varData.id}"
                    id="DataId" />
            </rich:column>
			<rich:column 
				id ="SelectColumn"
			 	style="text-align:left"> 
             	<f:facet name="header" id ="SelectColumnHeader">
				<h:panelGroup id ="SelectColumnHeaderGroup">
					<h:selectBooleanCheckbox id="ToggleSelection"
						value="#{Data.isAllSelected}"
						onclick="toggleSelectAllRows(this)">
					</h:selectBooleanCheckbox>
 
                </h:panelGroup>
                </f:facet>
				<h:selectBooleanCheckbox id="checkIt"
					value="#{varData.selected}"
					onclick="toggleSelectAllCheckBox(this)">
 
				</h:selectBooleanCheckbox>
			</rich:column>

Le formulaire modal

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
<f:view...>
 
    <div id="modal-wrapper">
        <h2 class="title">
            <h:outputText value="#{bundle.Data_delete_multi_title}"/>
        </h2>
        <div class="modal-content">
            <h:outputText value="#{bundle.Data_delete_multi_confirm}" escape="false"/>
            <h:form>
                <a4j:outputPanel ajaxRendered="true">
                   <h:inputHidden value="#{Data.currentItem.id}"/>
                     <div class="button-wrapper">
                        <br/>
                        <a4j:commandLink styleClass="button btn-blue" onclick="#{rich:component('deleteSelectedDatasPanel')}.hide();" immediate="true">
                            <span>
                                <h:outputText value="#{bundle.Data_form_bt_no}"/>
                            </span>
                        </a4j:commandLink>
                        <a4j:commandLink styleClass="button" action="#{Data.doDeleteSelectedDatas}" reRender="tableData, multiDataTable, emptyPhoneDataTable" oncomplete="#{rich:component('deleteSelectedDatasPanel')}.hide();">
                            <span>
                                <h:outputText value="#{bundle.Data_form_bt_yes}"/>
                            </span>
                        </a4j:commandLink>
                    </div>
                </a4j:outputPanel>
            </h:form>
        </div>
    </div>
</f:view>

et le Bean:

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
    /**
     * Delete all selected Data.
     */
    public String doDeleteSelectedDatas() {
        try {
        	for (SelectableData Data : allDatas){
        		if(Data.isSelected())
        			DataService.deleteData(Data.getId());
        	}
        } catch (Exception e) {
            logger.error("Error while deleting the Data.", e);
        }
 
        return OUTCOME_VIEW_Data;
    }

[romaintaz]

Bonjour,

Si je comprends bien ton code, lorsque l'utilisateur clique sur le bouton "Delete all", une requête Ajax est envoyée au serveur, ne fait rien de spécial (hormis de mettre à jour les propriétés du beans), puis au retour de la réponse, ton modal panel est affiché.
Ensuite, l'utilisateur doit confirmer afin que la suppression soit effective, ce qui se fait via un second appel au serveur.

En fait, ça pourrait effectivement marcher si ton bean était en scope session, mais comme tu le dis, il faut que ton bean soit en scope request.

Ca ne fonctionne pas en l'état parce qu'au second appel (la confirmation), le bean contenant les informations des checkboxes est réinitialisé (dû au scope request), et du coup tu n'as plus les informations.
Cela est aussi dû au fait que ton second appel ne renvoie au serveur que les informations contenues dans le formulaire de la fenêtre modale, ce qui exclue toute information propre au tableau.

Pour résoudre ton problème, tu peux par exemple :

1. Opter pour une popup JavaScript "basique", en utilisant le confirm() :

Code xml :

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

<a4j:commandLink id="deleteAllSelected" onclick="if (!confirm('Veuillez confirmer la suppression')) { return false; }" actionListener="#{Data.doDeleteSelectedDatas}" .../>

Pour information, quand on fait un onclick="... return false;" dans un commandLink / commandButton, le fait d'avoir un return false fait que l'appel au serveur n'est pas exécuté. C'est pratique pour ajouter une condition avant une requête au serveur.

L'avantage, c'est que ça simplifie grandement ton code, vu que tu n'as pas besoin d'une modalPanel, et que tu ne fais qu'un seul appel au serveur. Le seul inconvénient, c'est que cette popup, bien que relativement standard, est moche et non paramétrable (au niveau du look).

2. Tu peux bidouiller en faisant en sorte que ce soit un bouton du tableau qui soit cliquer plutôt que celui de la popup. En faisant ça, c'est tout le tableau, et donc les informations des checkboxes qui seront envoyées au serveur.
Alors tout d'abord, supprime le premier appel Ajax qui ne sert à rien, et fait juste afficher la popup (note le return false à la fin) :

Code xml :

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

1
2
3
<a4j:commandLink onclick="#{rich:component('deleteSelectedDatasPanel')}.show(); return false;"
    styleClass="btn-action delete"
    title="#{bundle.Data_form_tooltip_multi_delete}"/>

Puis, ajoute à côté un 2e bouton qui va faire la vraie action côté serveur :

Code xml :

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

1
2
3
4
5
6
<a4j:commandLink style="display: none;"
    id="hiddenButton"
    value="#{bundle.Data_form_bt_yes}"
    actionListener="#{Data.doDeleteSelectedDatas}"
    reRender="tableData, multiDataTable, emptyPhoneDataTable"
    oncomplete="#{rich:component('deleteSelectedDatasPanel')}.hide();"/>

Tu notes que ce bouton est bien lié à l'action côté serveur (actionListener="#{Data.doDeleteSelectedDatas}") et qu'il est caché (style="display: none;").

Maintenant, dans ton bouton de la popup, tu vas juste lui dire de simuler un clic sur le bouton en question :

Code xml :

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

1
2
3
4
<a4j:commandLink
    onclick="$('myMainForm:tableData:hiddenButton').click(); return false;"
    styleClass="button"
    value="#{bundle.Data_form_bt_yes}"/>

En JavaScript $("xxx") (grâce à la librairie prototype incluse dans Richfaces) est un raccourci pour dire "récupère moi l'objet dont l'ID est xxx. En JSF, les ID réels des éléments sont préfixés par les ID des containeurs (les forms, les tables, etc.). Ainsi, ton bouton étant placé dans le formulaire principal (j'ai supposé qu'il s'appelait myMainForm), puis dans la datatable (à l'ID tableData), alors son ID réel est myMainForm:tableData:hiddenButton.

L'avantage de cette solution, c'est que ça devrait marcher avec ton code et ton scope de bean, ça enlève un appel inutile au serveur. Le seul désavantage est que c'est un peu du bidouillage...


D'autres points maintenant, sur ton code :

1. Plutôt que d'écrire :

Code xml :

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

1
2
3
4
5
<a4j:commandLink ...>
    <span>
        <h:outputText value="#{bundle.Data_form_bt_yes}"/>
    </span>
</a4j:commandLink>

tu peux simplement écrire ceci :

Code xml :

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

<a4j:commandLink ... value="#{bundle.Data_form_bt_yes}"/>

Ca rend le code plus lisible.

2. Dans ta popup, tu fais :

Code xml :

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

1
2
3
4
5
<a4j:commandLink styleClass="button btn-blue" onclick="#{rich:component('deleteSelectedDatasPanel')}.hide();" immediate="true">
    <span>
        <h:outputText value="#{bundle.Data_form_bt_no}"/>
    </span>
</a4j:commandLink>

Change ton onclick pour lui ajouter un return false à la fin, car le but de ce bouton est juste de cacher la popup. Aucun appel au serveur n'est donc requis. De même, comme tu ne vas jamais faire d'appel au serveur avec ce lien, autant mettre un lien "normal" et pas ajax. Ce qui donne au final :

Code xml :

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

<h:commandLink styleClass="button btn-blue" onclick="#{rich:component('deleteSelectedDatasPanel')}.hide(); return false;"value="#{bundle.Data_form_bt_no}"/>

3. Tu utilises des action="#{monBean.maMethode}". Dans ton cas, utilises plutôt des actionListener. Attention, une action est liée à une méthode à la signature suivante :

Code xml :

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

public String maMethode() { ... }

tandis qu'une actionListener est liée à une méthode :

Code xml :

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

public void maMethode(ActionEvent evt) { ... }

La différence ? L'action est à privilégier quand tu souhaites réaliser une action suivie d'une navigation (c'est d'ailleurs le rôle du String de retour de la méthode). Si tu souhaites juste réaliser une action au sein d'une même page (ce que tu fais ici), alors opte pour une actionListener. Dans la majorité des cas, si tu utilises un bouton / lien AJAX (<a4j:commandXXX> avec Richfaces), tu opteras donc pour un actionListener...

[romaintaz]

Ah une dernière chose : ton problème n'est pas trivial, et tu es donc loin d'être passé pour bête, même pas 5 secondes

[Roger_Rabbit]

Romain, un grand merci pour ces précieuses informations : ta réponse était un régal à lire et une mine d'or pour le débutant que je suis!
Et merci plus encore pour les conseils supplémentaires prodigués.

Avant de revenir sur le sujet principal, juste un point concernant ta suggestion de simplification de ma modale : les balises span sont en fait des éléments de mise en forme souscrivant à la charte graphique de mon application (tout est caché dans la css). Donc je ne peux pas m'en passer. Par contre, j'ai supprimé les appels ajax comme suggéré (et testé au cas où.... mais pas de problème, ou plutôt pas de changement côté client).


Et donc concernant le problème principal : j'ai donc appris plein de choses précieuses... et tenté de suivre ta piste n°2 (charte graphique impose!).


Et là, je suis tombé sur un os : je n'arrivais pas à pointer vers mon bouton caché : myMainForm:tableData:hiddenButton
J'utilise Firebug pour identifier le chemin (que je rends visible temporairement le temps d'en afficher les infos) et le chemin est bien celui-ci... mais la console m'indique que "hiddenButton" n'existe pas lorsque je clique sur mon bouton "oui".

D'abord j'ai du faire une correction, et c'est une de tes remarques qui me l'a suggérée : comme ma méthode doDeleteSelectedData est de type string et non void, j'ai remplacé dans ta solution le actionListener par un action (je renvoie pour l'instant une règle de navigation). Ca m'a déjà corrigé qqs erreurs

J'ai ensuite tenté de faire -à l'ancienne- un "getElementById" avec le même chemin, et à la place j'ai une erreur dans la console :

Erreur*: document.getElementById("MyMainForm:tableData:hiddenButton").click is not a function
Ligne*: 1

... au moins je progressais.

J'ai aussi essayé de remplacer (sans y croire!) le action du hiddenButton par un un onclick.. mais là je reçois dans la console (Eclipse) un message me disant que la propriété (doDeleteSelectedData) n'existe pas dans mon bean... apparemment, il ne supporte lui aussi que les méthodes avec une signature void (si j'ai bien compris!).

J'ai tenté par ailleurs de pointer vers d'autres éléments à la place (pour voir si ça venait de la définition de ma commande), et ça fonctionne sur mes checkboxs : leur méthode onClick est bien appelée. J'ai donc essayé de mettre mon bouton caché sous la forme d'une checkbox (je ne suis plus à une bidouille près!), mais là encore, impossible d'utiliser onclick pour faire appel à mon bean (du reste, la définition que j'ai lue dit que cette méthode n'accepte que des scripts, donc ça parait logique).

Puis... après une phase de dépression aigüe et une 10aine de cafés, j'ai remplacé "click" par "onclick"... et le miracle s'est opéré!

Pour résumer : pour que ça fonctionne, voici le delta par rapport à ta solution :

Code :

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

1
2
3
4
5
6
7
     <a4j:commandLink
     	id="hiddenButton"
     	style="display: none;"
     	value="#{bundle.data_form_bt_yes}"
     	action="#{data.doDeleteSelectedContacts}"
     	reRender="tableData, multiDataTable, emptyPhoneDataTable"
     	onComplete="#{rich:component('deleteSelectedDataPanel')}.hide();">

Code :

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

1
2
3
4
5
     <a4j:commandLink  
     	styleClass="button" 
     	onclick="(document.getElementById('MyMainForm:tableData:hiddenButton')).onclick();return false;">
      	<span><h:outputText value="#{bundle.data_form_bt_yes}" /> </span>
     </a4j:commandLink>

Évidemment, c'est beaucoup de bidouilles... et il est très probable que ma méthode ne soit pas très propre (d'expérience dans d'autres environnements, il n'est jamais très propre d'appeler directement un callback). J'accepte donc toute critique à ce sujet!

Dans tous les cas, je te renouvelle mes remerciements : je peux recommencer à avancer!

[romaintaz]

Romain, un grand merci pour ces précieuses informations : ta réponse était un régal à lire et une mine d'or pour le débutant que je suis!
Et merci plus encore pour les conseils supplémentaires prodigués.

Merci

les balises span sont en fait des éléments de mise en forme souscrivant à la charte graphique de mon application

Je m'en doutais un peu (j'ai moi même eu mes galères avec la charte graphique à l'époque !).

Et là, je suis tombé sur un os : je n'arrivais pas à pointer vers mon bouton caché : myMainForm:tableData:hiddenButton
J'utilise Firebug pour identifier le chemin (que je rends visible temporairement le temps d'en afficher les infos) et le chemin est bien celui-ci... mais la console m'indique que "hiddenButton" n'existe pas lorsque je clique sur mon bouton "oui".

Bizarre, il n'a pas de raison de ne pas exister pourtant... Eventuellement, place le juste avant / après ton datatable (donc ne le met pas directement dans la balise <rich:dataTable>) et essaie d'y accéder par myMainForm:hiddenButton...
La technique fonctionne, il m'est arrivé d'avoir recours à une telle solution.

J'ai ensuite tenté de faire -à l'ancienne- un "getElementById" avec le même chemin, et à la place j'ai une erreur dans la console :

... au moins je progressais.

Eventuellement un autre test, en passant par jQuery :

Code xml :

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

onclick="jQuery('#myMainForm\\:tableData\\:hiddenButton').click(); return false;"

J'ai aussi essayé de remplacer (sans y croire!) le action du hiddenButton par un un onclick.. mais là je reçois dans la console (Eclipse) un message me disant que la propriété (doDeleteSelectedData) n'existe pas dans mon bean... apparemment, il ne supporte lui aussi que les méthodes avec une signature void (si j'ai bien compris!).

Tu avais raison de ne pas y croire Explication : l'attribut action pointe vers une méthode Java (côté serveur). Cette méthode doit retourner String et ne prend aucun argument.
L'attribut onclick pointe sur une fonction JavaScript, exécutée côté serveur. Tu peux toutefois y mettre une expression EL (les #{...} sont des expressions EL), mais là, ça fait appel à un getter de ton bean qui doit retourner un String (voire à la limite un type primitif), qui est une chaine de caractère correspondant à du JavaScript. Par exemple :

Code xml :

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

onclick="#{monBean.unTruc}"

et dans mon bean Java :

Code :

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

1
2
3
public String getUnTruc() {
    return "if ('toto' === 'tata') { alert('Ooops, quelque chose ne va pas'); }";
}

Donc dans ton cas, JSF a recherché la méthode getDoDeleteSelectedData() qui n'existe effectivement pas !

Puis... après une phase de dépression aigüe et une 10aine de cafés, j'ai remplacé "click" par "onclick"... et le miracle s'est opéré!

Attention, ce n'est pas la même chose. onclick est l'action JavaScript exécuté lorsque l'événement du clic est lancé sur cet élément. click() est la méthode pour simuler un clic sur l'élément...

Pour résumer : pour que ça fonctionne, voici le delta par rapport à ta solution :

Code :

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

1
2
3
4
5
6
7
     <a4j:commandLink
         id="hiddenButton"
         style="display: none;"
         value="#{bundle.data_form_bt_yes}"
         action="#{data.doDeleteSelectedContacts}"
         reRender="tableData, multiDataTable, emptyPhoneDataTable"
         onComplete="#{rich:component('deleteSelectedDataPanel')}.hide();">

Code :

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

1
2
3
4
5
     <a4j:commandLink  
         styleClass="button" 
         onclick="(document.getElementById('MyMainForm:tableData:hiddenButton')).onclick();return false;">
          <span><h:outputText value="#{bundle.data_form_bt_yes}" /> </span>
     </a4j:commandLink>

Je ne vois pas trop la différence, si ce n'est que tu utilises document.getElementById à la place de $ (qui devrait être normalement la même chose) et que tu l'as entouré d'une parenthèse. J'ai raté quelque chose ?

[Roger_Rabbit]

Je ne vois pas trop la différence, si ce n'est que tu utilises document.getElementById à la place de $ (qui devrait être normalement la même chose) et que tu l'as entouré d'une parenthèse. J'ai raté quelque chose ?

L'autre différence est que j'appelle onclick() au lieu de click();
J'ai aussi remplacé actionListener par action (mais ça n'est pas le fond ici : j'aurais aussi bien pu changer la signature de ma méthode à la place puisque de toutes façons elle renvoie une règle de navigation sur la page en cours).


Pour le reste, je fais les tests que tu as proposés dans la soirée, et je te fais un retour dans la foulée.

[Roger_Rabbit]

Bizarre, il n'a pas de raison de ne pas exister pourtant... Eventuellement, place le juste avant / après ton datatable (donc ne le met pas directement dans la balise <rich:dataTable>) et essaie d'y accéder par myMainForm:hiddenButton...
La technique fonctionne, il m'est arrivé d'avoir recours à une telle solution.

Pas mieux... il doit y avoir une source à ce problème, mais là je ne trouve pas.

Eventuellement un autre test, en passant par jQuery :

Code xml :

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

onclick="jQuery('#myMainForm\\:tableData\\:hiddenButton').click(); return false;"

Ca ne plaît pas beaucoup plus à JSF : lorsque je teste ça, j'ai une erreur de parsing :

Error Traced[line: 40] The element type "div" must be terminated by the matching end-tag "</div>".

Pas beaucoup de succès, ce soir, chez le lapin.

Attention, ce n'est pas la même chose. onclick est l'action JavaScript exécuté lorsque l'événement du clic est lancé sur cet élément. click() est la méthode pour simuler un clic sur l'élément...

Donc je fais bien quelque chose qui de mon point de vue est relativement sale... même si ça marche, du reste.
Est-ce que la méthode 'click()' est applicable à tous les commandlink ajax théoriquement? En l'occurrence on dirait que non... (et que par contre c'est possible sur un h:selectBooleanCheckbox)

Est-ce qu'il ne faudrait pas alors l'appliquer sur un "sous-élément" (là je parle absolument sans savoir, mais avec comme modèle d'inspiration les "childNodes" de javascript).

[Roger_Rabbit]

Eventuellement un autre test, en passant par jQuery :

Code xml :

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

onclick="jQuery('#myMainForm\\:tableData\\:hiddenButton').click(); return false;"

Aujourd'hui ça marche (pas directement cependant : je l'ai collé dans une fonction entre deux balises <script> au début de mon xml. C'est cette fonction que j'appelle)....