[JSF][Javascript]Contrôle côté client

Version imprimable

15/11/2006, 11h18
JohnBlatt

[JSF][Javascript]Contrôle côté client

Bonjour à tous,

Je suis tout nouveau sur les JSF et c'est déjà la "lutte de l'Homme contre la machine" :lol: Je m'explique : j'ai un formulaire avec des champs (des inputs) et un bouton généré par le code

Code:

<h:commandButton value="Enregistrer" action="listBooks" actionListener="#{bookBean.saveBook}" styleClass="buttonDU"/>

Quand je clique sur le bouton, l'action est bien appelée et ça marche très bien. Maintenant, j'aimerais faire le truc suivant (un truc dinnnnnngue !) : avant d'appeler l'action, j'aimerais faire un contrôle javascript côté client... J'ai donc ajouter l'attribut onClick et le bouton est devenu :

Code:

<h:commandButton value="Enregistrer" action="listBooks" actionListener="#{bookBean.saveBook}" onclick="Javascript:shruberrrrrry()" styleClass="buttonDU"/>

J'ai bien évidemment définit cette fonction javascript dans une balise <script></script>. Le pb est le suivant : quelque soit le résultat de mes test, l'action finit toujours par être appelée !!!! D'où ma question : n'y a t-il pas un moyen de ruser ?

Merci à vous !
15/11/2006, 11h57
Shivan

le secret c'est return false;

tu fais ton controle javascript. si à la fin javascript return false l'action n'est pas appelé. si tu ne return rien ou tu return true l'action est appelé

Et si ! Elle est appelée ! C'est bien ça mon pb.

voici mon code :

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
 
 
<%@ page language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">
 
	<title>Ajouter / Editer un livre</title>
	<link href="layout/du_styles.css" type="text/css" rel="stylesheet" />
	<script>
		function faireTest(){
			return false;
 
		}
	</script>
 
</head>
 
<body>
	<noscript>
		Votre navigateur ne supporte pas le javascript ou celui-ci n est pas activé
	</noscript>
 
 
	<f:view>
		<h:form>
		<center>
			<h:inputHidden id="id" value="#{bookBean.id}"/>
 
			<h:panelGrid columns="3" cellpadding="2" cellspacing="2"  width="300">
 
				<h:outputText value="Auteur" styleClass="bleu10B"/>
				<h:outputText value=":" styleClass="bleu10"/>
				<h:inputText id="author" value="#{bookBean.author}" styleClass="Swing10_200">
				</h:inputText>
 
			    <h:outputText value="Titre" styleClass="bleu10B"/>
			    <h:outputText value=":" styleClass="bleu10"/>
				<h:inputText id="title" value="#{bookBean.title}" styleClass="Swing10_200">
				</h:inputText>
 
				<h:outputText value="Available" styleClass="bleu10B"/>
				<h:outputText value=":" styleClass="bleu10"/>
				<h:selectBooleanCheckbox id="available" value="#{bookBean.available}" />
 
 
			</h:panelGrid>
 
		<br>
		<h:messages id="errors"	style="color:red;font-weight:bold" layout="table" />
		<h:commandButton value="Enregistrer" action="listBooks" actionListener="#{bookBean.saveBook}"  onclick="faireTest()" styleClass="buttonDU"/>
		<h:commandButton value="Annuler" action="listBooks" actionListener="#{bookBean.cancel}" styleClass="buttonDU"/>
 
		</center>
		</h:form>
	</f:view>
</body>
</html>

ça marche chez moi. Et je viens de verifier dans le wiki de myfaces (il faut dire que tu m as mis un doute) : If the javascript block returns true then the form is submitted as usual. If it returns false then the form submission is aborted.

Le lien si tu veux aller voir : http://wiki.apache.org/myfaces/Javas...avaServerFaces.

Je vois qu'une explication tu utilise Sun RI et pas myFaces.

Dans ce cas je te propose un petit hack :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <h:form id="editUser"> Ton code ici <!--create hidden commandLink --!> <h:commandLink id="editUserLink" action="#{userForm.edit}"> </h:commandLink> </h:form> <script type="text/javascript"> codeJavaScriptquifaitl'action(){ clear_editUser(); <-- clear_nom de ta form var f = document.forms['editUser']; f.elements['editUser:_link_hidden_'].value='editUser:editUserLink'; <-- le lien appelé f.submit(); }
le commandLink n'as pas de value donc il n'apparaitra pas dans ta page. Tu apelle faireTest et si tu veux faire l'action du commandLink tu fais le petit code javascript que je t'ai donné.

voila en esperant que ça puisse t'aider. Mais dans l'ideal passe à myfaces.

15/11/2006, 14h14
JohnBlatt

Merci Shivan pour tes réponses, mais je suis désolé d'insister : ça ne marche pas... Toi aussi tu m'as filé un doute : c'est bien myfaces que j'utilise. J'ai été sur le site http://myfaces.apache.org/download.html et j'ai téléchargé le myfaces-core-1.1.4-bin.zip J'en ai fait une librairie utilisateur dans mon eclipse, et c'est avec elle que le projet est compilé. Mais je t'assure, quand j'appuis sur le bouton, la fonction javascript est bien appelée (j'ai même fait un alert() ) et bien qu'il y est la ligne "return false;" l'action est quand même lancée !! :cry: C'est p'tre dûe au fait qu'il y ait un actionListener="#{bookBean.cancel}" dans le <h:commandButton . Qu'en penses-tu ? Il ne prend pas la main sur le onClick ?

Merci de ton aide.

Dis-moi Shivan... as-tu Tomahawk ? Parce que moi je ne l'ai pas. Et quand le serveur tomcat démarre, j'ai ce message : INFO: Tomahawk jar not available. Autoscrolling, DetectJavascript, AddResourceClass and CheckExtensionsFilter are disabled now.... Bizarre bizarre.
15/11/2006, 15h15
Shivan

Oui moij 'ai bien tomahawk

Citation:

INFO: Tomahawk jar not available. Autoscrolling, DetectJavascript, AddResourceClass and CheckExtensionsFilter are disabled now

Autoscrolling, DetectJavascript, AddResourceClass ... sont bien des paramétres de tomahawk. bizarre qu'il te les demande. Mais c'est peut être normal. Etant donné qu'il ne les trouvent pas, il les disabled.
Bref je ne pense pas que ça est quelque chose à voir avec ton probléme. Je te conseille quand meme de prendre tomahawk et d'utiliser ses composants, il étend les composants standard avec d'autre attribut.

Code:

<h:commandButton value="Enregistrer" action="listBooks" actionListener="#{bookBean.saveBook}" onclick="faireTest()" styleClass="buttonDU"/>

Déja tu ne devrais pas utiliser d'actionListener ici (à priori tu en as pas le besoin). ton "#{bookBean.saveBook}" devrai etre dans action et ta fonction saveBook doit retourner "listBooks" (pour que ta navigation fonctionne).

Ceci dit actionListener + javascript avec return false fonctionne bien chez moi et ne fait pas l'action. Essaye d'enlever ton actionListener et de n'utiliser que action.
15/11/2006, 15h37
JohnBlatt
Tiens... juste pour me faire marrer... tu as quoi dans tes taglibs ?
Moi, j'utilise ça
Code:

1 2 3 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
Ca se trouve ça vient de là !

Code:

1
2
3
4
 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>

non j'ai les meme que toi.

Il faut que tu teste un cas simple du genre

Code:

1
2
 
<h:commandButton action=#{action} onclick="return false;" value="test"