Javascript marche pas avec JSF

**jaymz** · 06/11/2008, 10h12

Bonjour,

Je n'arrive pas à exécuter du code javascript dans mes JSP à partir de mes composants JSF.

En plus ce que je veux faire est des plus simples, donc je voudrais vraiment éviter de passer par AJAX et de faire ça en javascript côté client : sur un formulaire, quand je clique sur une checkbox je veux que ça décoche des checkbox présentes sur le même formulaire... simple non ?

Je déclare ma fonction JS dans le head de ma page JSP :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<head>
...
	<script type="text/javascript">
		function unCheckFINBoxes(){
			documents.forms.form["form:finLate"].checked = false;
			documents.forms.form["form:finNew"].checked = false;
		}
	</script>
...
</head>

et sur mon composant JSF :

Code :

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

1
2
3
4
5
6
7
8
 
<h:form id="form">
...
    <h:selectBooleanCheckbox id="opsNew" value="#{myBean.opsNew}" onclick="unCheckFINBoxes()" />
    <h:selectBooleanCheckbox id="finLate" value="#{myBean.finLate}" />
    <h:selectBooleanCheckbox id="finNew" value="#{myBean.finNew}" />
...
</h:form>

Même en ne mettant qu'un petit

Code :

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

alert('test');

dans ma fonction JS ça ne marche pas, le code est pas appelé quoi

Qqn voit qu'est-ce qui ne va pas ?

Merci d'avance.

DT.

**Sniper37** · 06/11/2008, 10h40

essaye avec:

Code :

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

1
2
getElementsByName()
getElementsById()

**sup** · 06/11/2008, 10h43

Salut,
quand tu verifies le code HTML généré tout est OK?

essayes de rajouter javascript: à ton evenement onclick

Code :

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

1
2
 
onclick="javascript:unCheckFINBoxes()"

Je me souviens avoir eu des soucis aussi avec Facelets + Javascript...

**jaymz** · 06/11/2008, 11h20

Merci pour vos réponses

Bon le truc c'est que pour le moment en tout cas, ce n'est pas un problème d'accès aux composants JSF de ma page...

Car comme je l'ai dit, si je ne mets que alert('test') dans ma fonction JS rien n'est exécuté

J'ai essayé de préfixer l'appel à la méthode comme tu me l'as conseillé sup mais rien ne change

Le code HTML généré pour le composant JSF en question est le suivant :

Code :

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

1
2
 
<input id="form:opsNew" type="checkbox" name="form:opsNew" />

==> L'attribut onclick n'apparaît pas !?

**seddik_saber** · 06/11/2008, 14h48

peut tu mettre le code de page jsp comme tu l'as dans ta source. ca me semble un probleme lors du parsing de ton fichier jsp. tu utilse jsf 1.1???

**jaymz** · 06/11/2008, 15h20

J'utilise myFaces Core 1.2.3.

Code JSP :

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
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="authz"%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>e-Flight</title>
	<link href="../../css/report-status.css" rel="stylesheet" type="text/css">
	<link href="../../css/layout.css" rel="stylesheet" type="text/css">
 
	<script type="text/JavaScript" language="JavaScript">
		function unCheckFINBoxes(){
			alert('unCheckFINBoxes');
		}
 
		function unCheckOPSBoxes(){
			alert('unCheckOPSBoxes');
		}
	</script>
</head>
<body>
	<f:view> 
		<rich:messages />
		<h:form id="form">
			<rich:panel header="Get e-Flight Report List">
				<h:panelGrid columns="3">
					<h:panelGrid columns="2">
						<h:outputLabel value="Inbound" />
						<authz:authorize ifAllGranted="ROLE_EXPORT">
							<h:selectBooleanCheckbox disabled="true" />
						</authz:authorize>
						<authz:authorize ifNotGranted="ROLE_EXPORT">
							<h:selectBooleanCheckbox value="#{manageReportBean.inbound}" />
						</authz:authorize>					
 
						<h:outputLabel value="Outbound" />
						<authz:authorize ifAllGranted="ROLE_IMPORT">
							<h:selectBooleanCheckbox disabled="true" />
						</authz:authorize>
						<authz:authorize ifNotGranted="ROLE_IMPORT">
							<h:selectBooleanCheckbox value="#{manageReportBean.outbound}" />
						</authz:authorize>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputLabel />
						<h:outputLabel value="Station" />
 
						<h:outputLabel />
						<h:selectOneMenu value="#{manageReportBean.selectedStation}">
							<f:selectItems value="#{manageReportBean.listItemsStations}"/>
						</h:selectOneMenu>
 
						<h:outputLabel />
						<h:outputLabel value="Flight date" />
 
						<h:outputLabel for="flightDateFrom" value="From" />
						<rich:calendar id="flightDateFrom" value="#{manageReportBean.fromDate}" enableManualInput="true" datePattern="dd-MM-yyyy" />
 
						<h:outputLabel for="flightDateTo" value="To" />
						<rich:calendar id="flightDateTo" value="#{manageReportBean.toDate}" enableManualInput="true" datePattern="dd-MM-yyyy" />
					</h:panelGrid>
					<h:panelGrid columns="3">
						<h:outputLabel />
						<h:outputLabel value="OPS" />
						<h:outputLabel value="FIN" />
 
						<h:outputLabel value="Late" />
						<h:selectBooleanCheckbox id="opsLate" value="#{manageReportBean.opsLate}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finLate" value="#{manageReportBean.finLate}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="New" />
						<h:selectBooleanCheckbox id="opsNew" value="#{manageReportBean.opsNew}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finNew" value="#{manageReportBean.finNew}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="Open" />
						<h:selectBooleanCheckbox id="opsOpen" value="#{manageReportBean.opsOpen}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finOpen" value="#{manageReportBean.finOpen}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="Closed" />
						<h:selectBooleanCheckbox id="opsClosed" value="#{manageReportBean.opsClosed}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finClosed" value="#{manageReportBean.finClosed}" onchange="unCheckOPSBoxes()" />
					</h:panelGrid>
				</h:panelGrid>
				<h:commandButton value="Search" action="#{manageReportBean.search}" />
 
				<br /><br />
				<rich:dataTable var="report" value="#{manageReportBean.reports}" rendered="#{manageReportBean.reports.rowCount > 0}">
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Flight Number(In)" />
						</f:facet>
							<h:outputText value="#{report.flightIn.flightNumber}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="A/C Reg.(In)" />
						</f:facet>
							<h:outputText value="#{report.flightIn.acRegistration}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Flight Number(Out)" />
						</f:facet>
							<h:outputText value="#{report.flightOut.flightNumber}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="A/C Reg.(Out)" />
						</f:facet>
							<h:outputText value="#{report.flightOut.acRegistration}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Report" />
						</f:facet>
							<h:outputText value="#{report.type}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Status" />
						</f:facet>
							<h:outputText value="#{report.status}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Station" />
						</f:facet>
							<h:outputText value="#{report.station.code}" styleClass="#{report.status}" />
					</rich:column>
					<rich:column>
						<h:commandLink value="Select" action="#{manageReportBean.pickup}" />
						<h:outputText value=" " />
						<h:commandLink value="Update" action="#{manageReportBean.editFromList}" rendered="#{(report.status == 'open' || report.status == 'closed') && (!(report.type == 'fin' && report.status == 'closed'))}" />
					</rich:column>
				</rich:dataTable>
			</rich:panel>
		</h:form>
	</f:view>
</body>
</html>

Comme j'ai mis tout le code de la JSP, le bout qui nous intéresse est là :

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
 
						<h:outputLabel value="Late" />
						<h:selectBooleanCheckbox id="opsLate" value="#{manageReportBean.opsLate}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finLate" value="#{manageReportBean.finLate}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="New" />
						<h:selectBooleanCheckbox id="opsNew" value="#{manageReportBean.opsNew}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finNew" value="#{manageReportBean.finNew}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="Open" />
						<h:selectBooleanCheckbox id="opsOpen" value="#{manageReportBean.opsOpen}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finOpen" value="#{manageReportBean.finOpen}" onchange="unCheckOPSBoxes()" />
 
						<h:outputLabel value="Closed" />
						<h:selectBooleanCheckbox id="opsClosed" value="#{manageReportBean.opsClosed}" onchange="unCheckFINBoxes()" />
						<h:selectBooleanCheckbox id="finClosed" value="#{manageReportBean.finClosed}" onchange="unCheckOPSBoxes()" />

en voici le rendu HTML :

Code :

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

1
2
3
4
5
6
7
8
9
 
<input id="form:opsLate" type="checkbox" name="form:opsLate" />
<input id="form:finLate" type="checkbox" name="form:finLate" />
<input id="form:opsNew" type="checkbox" name="form:opsNew" />
<input id="form:finNew" type="checkbox" name="form:finNew" />
<input id="form:opsOpen" type="checkbox" name="form:opsOpen" />
<input id="form:finOpen" type="checkbox" name="form:finOpen" />
<input id="form:opsClosed" type="checkbox" name="form:opsClosed" />
<input id="form:finClosed" type="checkbox" name="form:finClosed" />

Merci.

Si y avait une erreur de parsing la page n'aurait pas été rendue correctement, non ?

**seddik_saber** · 06/11/2008, 15h49

bon pour jsf 1.1 il ne signale pas les erreur lors du parsing du fichier jsp.
par hasard t'as pas un renderer personaliser pour le type:
javax.faces.Checkbox.
bon pour chercher la cause peut tu attacher la source de cet implementation jsf et faire du deboggage lors du render
personellement je voix pas d'erreur

Javascript marche pas avec JSF

JSF Java

Vue hybride

Discussions similaires

Partager

Partager