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

**JohnBlatt** · 15/11/2006, 11h18

Bonjour à tous,

Je suis tout nouveau sur les JSF et c'est déjà la "lutte de l'Homme contre la machine"

Je m'explique : j'ai un formulaire avec des champs (des inputs) et un bouton généré par le code

Code :

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

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

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

<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 !

**Shivan** · 15/11/2006, 11h57

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é

**JohnBlatt** · 15/11/2006, 12h24

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

voici mon code :

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
 
 
<%@ 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>

**Shivan** · 15/11/2006, 12h55

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

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

**JohnBlatt** · 15/11/2006, 14h14

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 !!

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.

**Shivan** · 15/11/2006, 15h15

Oui moij 'ai bien tomahawk

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 :

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

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

**JohnBlatt** · 15/11/2006, 15h37

Tiens... juste pour me faire marrer... tu as quoi dans tes taglibs ?
Moi, j'utilise ça

Code :

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

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à !

**Shivan** · 15/11/2006, 18h21

Code :

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

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 :

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

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

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

JSF Java

Discussions similaires

Partager

Partager