Fonction javascript qui appelle une autre fonction javascript

**leara500** · 09/10/2012, 20h51

Bonjour,

Je suis en train de développer une application de gestion des horaires hebdomadaire, et j'ai besoin de vos lumières

En fonction des horaires saisies, un calcul du nombre d'heures réalisées par le salarié doit être fait par l'application.

Et c'est là où je rencontre des difficultés

extrait de planning.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
 
 <!-- Lundi -->	
 <td>
<input type="radio" id="demiab1_<s:property value="%{personneDto.idPersonne}"/>" name="work1_<s:property value="%{personneDto.idPersonne}"/>"  value="0" onchange="afficheDiv('1_<s:property value="%{personneDto.idPersonne}"/>', 'demiab1_<s:property value="%{personneDto.idPersonne}"/>', 'pres1_<s:property value="%{personneDto.idPersonne}"/>')" />  1/2 Abs 
<input type="radio" id="ab1_<s:property value="%{personneDto.idPersonne}"/>" name="work1_<s:property value="%{personneDto.idPersonne}"/>"  value="0" onchange="afficheDiv('1_<s:property value="%{personneDto.idPersonne}"/>', 'ab1_<s:property value="%{personneDto.idPersonne}"/>', 'pres1_<s:property value="%{personneDto.idPersonne}"/>')" />Abs 
<input type="radio" id="pres1_<s:property value="%{personneDto.idPersonne}"/>" name="work1_<s:property value="%{personneDto.idPersonne}"/>" value="1" onchange="afficheDiv('1_<s:property value="%{personneDto.idPersonne}"/>', 'ab1_<s:property value="%{personneDto.idPersonne}"/>', 'pres1_<s:property value="%{personneDto.idPersonne}"/>')" checked/> Pres<br>
	<div id="horaire1_<s:property value="%{personneDto.idPersonne}"/>" style="display: block;">
	<table border="1">
		<tr>
			<td>
 
				De <s:textfield name="horaire1dm_%{personneDto.idPersonne}" id="horaire1dm_%{personneDto.idPersonne}" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount(${personneDto.idPersonne})"/>A<s:textfield name="horaire1fm_%{personneDto.idPersonne}" id="horaire1fm_%{personneDto.idPersonne}" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount(${personneDto.idPersonne})"/>
			</td>
		</tr>
		<tr>
			<td>
 
				De <s:textfield name="horaire1da_%{personneDto.idPersonne}" id="horaire1da_%{personneDto.idPersonne}" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount(${personneDto.idPersonne})"/>A<s:textfield name="horaire1fa_%{personneDto.idPersonne}" id="horaire1fa_%{personneDto.idPersonne}" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount(${personneDto.idPersonne})"/>
			</td>
		</tr>
	</table>
	</div>
	<div id="abs1_<s:property value="%{personneDto.idPersonne}"/>" style="display: none;">
	<table border="1">
		<tr>
			<td>
 
				<s:select headerKey="-1" headerValue="Abs ?" id="absenceSelected1_%{personneDto.idPersonne}" name="absenceSelected1_%{personneDto.idPersonne}" list="listAbsenceDto" listKey="idAbsence" listValue="abrAbsence"></s:select>
			</td>
		</tr>
	</table>
	</div>
	<div id="demiabs1_<s:property value="%{personneDto.idPersonne}"/>" style="display: none;">
	<table border="1">
		<tr>
			<td>
				<div id="horaire1DemiAbsMatin_<s:property value="%{personneDto.idPersonne}"/>"></div>
			</td>
		</tr>
		<tr>
			<td>
				<s:select headerKey="-1" headerValue="Abs ?" id="demiabsenceSelected1_%{personneDto.idPersonne}" name="demiabsenceSelected1_%{personneDto.idPersonne}" list="listAbsenceDto" listKey="idAbsence" listValue="abrAbsence"></s:select>
			</td>
		</tr>
		<tr>
			<td>
				<div id="horaire1DemiAbsApres_<s:property value="%{personneDto.idPersonne}"/>"></div>
			</td>
		</tr>
	</table>
	</div>
 
</td>

Si l'utilisateur ne clique pas sur le bouton radio id="demiab1_" ou sur "id="ab1_", par défaut c'est la fonction doCount() qui est appelée

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
 
function doCount(idPersonne){
	//alert("do count");
	var res = 0;
	for (i=1; i<8; i++){
		var debutAM = 'horaire'+i+'dm_'+idPersonne;
		var finAM = 'horaire'+i+'fm_'+idPersonne;
		var debutPM = 'horaire'+i+'da_'+idPersonne;
		var finPM = 'horaire'+i+'fa_'+idPersonne;
		var debutDemiAbs = 'horaire'+i+'debDemiAbs_'+idPersonne;
		var finDemiAbs = 'horaire'+i+'finDemiAbs_'+idPersonne;
 
		var debutAM_value = document.getElementById(debutAM).value;
		//alert("debutDemiAbs : "+debutDemiAbs);
		//alert("finDemiAbs : "+finDemiAbs);
 
		var finAM_value = document.getElementById(finAM).value;
		var debutPM_value = document.getElementById(debutPM).value;
		var finPM_value = document.getElementById(finPM).value;
 
		var debutDemiAbs_value = "00:00";
		alert("document.getElementById(debutDemiAbs).value ====> "+document.getElementById(debutDemiAbs).value);
		if(document.getElementById(debutDemiAbs).value){
			debutDemiAbs_value = document.getElementById(debutDemiAbs).value;
			alert("DEMI début : "+debutDemiAbs_value);
		}
		//alert("Existnate : "+document.getElementById(debutDemiAbs_value));
 
		var finDemiAbs_value = "00:00";
		alert("document.getElementById(finDemiAbs).value ====> "+document.getElementById(finDemiAbs).value);
		if(document.getElementById(finDemiAbs).value){
			finDemiAbs_value = document.getElementById(finDemiAbs).value;
			alert("DEMI Fin : "+finDemiAbs_value);
		}
 
		if(debutAM_value == ''){
			debutAM_value = '00:00';
		}
 
		var debutAM_temps = debutAM_value.split(':');
		var debutAM_heure = debutAM_temps[0];
		var debutAM_min = debutAM_temps[1];
 
		var debutAM_min_res = (parseInt(debutAM_heure*60))+parseInt(debutAM_min);
 
		if(finAM_value == ''){
			finAM_value = '00:00';
		}
 
		var finAM_temps = finAM_value.split(':');
		var finAM_heure = finAM_temps[0];
		var finAM_min = finAM_temps[1];
 
		var finAM_min_res = (parseInt(finAM_heure*60))+parseInt(finAM_min);
		//alert('finAM_min_res : '+finAM_min_res);
 
		//calcul du temps effectué le matin en min
		var totalAM_min = finAM_min_res - debutAM_min_res;
 
		if(debutPM_value == ''){
			debutPM_value = '00:00';
		}
 
		var debutPM_temps = debutPM_value.split(':');
		var debutPM_heure = debutPM_temps[0];
		var debutPM_min = debutPM_temps[1];
 
		var debutPM_min_res = (parseInt(debutPM_heure*60))+parseInt(debutPM_min);
 
		if(finPM_value == ''){
			finPM_value = '00:00';
		}
 
		var finPM_temps = finPM_value.split(':');
		var finPM_heure = finPM_temps[0];
		var finPM_min = finPM_temps[1];
 
		var finPM_min_res = (parseInt(finPM_heure*60))+parseInt(finPM_min);
 
		//calcul du temps effectué l'apres midi en min
		var totalPM_min = finPM_min_res - debutPM_min_res;
 
		if(debutDemiAbs_value == ''){
			debutDemiAbs_value = '00:00';
		}
 
		var debutDemiAbs_temps = debutDemiAbs_value.split(':');
		var debutDemiAbs_heure = debutDemiAbs_temps[0];
		var debutDemiAbs_min = debutDemiAbs_temps[1];
 
		var debutDemiAbs_min_res = (parseInt(debutDemiAbs_heure*60))+parseInt(debutDemiAbs_min);
 
		if(finDemiAbs_value == ''){
			finDemiAbs_value = '00:00';
		}
 
		var finDemiAbs_temps = finDemiAbs_value.split(':');
		var finDemiAbs_heure = finDemiAbs_temps[0];
		var finDemiAbs_min = finDemiAbs_temps[1];
 
		var finDemiAbs_min_res = (parseInt(finDemiAbs_heure*60))+parseInt(finDemiAbs_min);
 
		//calcul du temps effectué durant la demi absence en min
		var totalDemiAbs_min = finDemiAbs_min_res - debutDemiAbs_min_res;
 
		//calcul total de l'heure effectué
		var total_Global_min = parseInt(totalAM_min) + parseInt(totalPM_min) + parseInt(totalDemiAbs_min);
		/*alert('totalAM_min : '+totalAM_min);
		alert('totalPM_min : '+totalPM_min);
		alert('totalDemiAbs_min : '+totalDemiAbs_min);
		alert('total_Global_min : '+total_Global_min);*/
 
		res += total_Global_min;
		/*var total_Global_heure = Math.floor(total_Global_min/60)+":"+(total_Global_min%60);
		alert('totalAM_min : '+total_Global_heure);*/
	}
	var heure_res = Math.floor(res/60);
	if (heure_res == 0 || heure_res < 10) heure_res = "0"+heure_res;
	var min_res = (res%60);
	if (min_res == 0 || min_res < 10) min_res = "0"+min_res;
 
	var total_Global_heure_sem = heure_res+":"+min_res;
	//alert('total_Global_heure_sem : '+total_Global_heure_sem);
 
	var champCache = 'nbHeureFaite_'+idPersonne;
	document.getElementById(champCache).value = total_Global_heure_sem;
 
	var div_res = 'div_nbHeureFaite_'+idPersonne;
	document.getElementById(div_res).innerHTML=total_Global_heure_sem;
 
}

Comme vous l'avez constaté, il y a la présence de bouton radio absence et demiabsence.

-> Si le salarié est en congé, l'utilisateur clique sur absence,
-> Si le salarié ne travaille que le matin ou l'après midi, l'utilisateur clique sur demiabsnce.

Si l'utilisateur clique sur le bouton radio absence ou demiabsence, d'autre fonctions sont appelée

Tout d'abord afficheDiv()

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
 
function afficheDiv(position, nomAbs, nomPres)
{
	//DECLARATION DES DIV
	var nameDivHoraire = 'horaire'+position;
	var nameDivAbsence = 'abs'+position;
	var nameDivDemiAbsence = 'demiabs'+position;
 
	//RECUPERATION DES INDEX ET ID PERSONNE
	var chaine = position;
	var tableau=chaine.split("_");
	var index = tableau[0];
	var idPersonne = tableau[1];
 
	//DECLARATION DES NOMS DE VARIABLES (champs texte)
	var debutAM = 'horaire'+index+'dm_'+idPersonne;
	var finAM = 'horaire'+index+'fm_'+idPersonne;
	var debutPM = 'horaire'+index+'da_'+idPersonne;
	var finPM = 'horaire'+index+'fa_'+idPersonne;
 
	//DECLARATION DES NOMS DE VARIABLES (select)
 
	var absenceSelectedId = "absenceSelected"+index+"_"+idPersonne;
	var demiAbsSelectedId = "demiabsenceSelected"+index+"_"+idPersonne;
	var idAbs = document.getElementById(absenceSelectedId).options[document.getElementById(absenceSelectedId).selectedIndex].id;
	var idDemiAbs = document.getElementById(demiAbsSelectedId).options[document.getElementById(demiAbsSelectedId).selectedIndex].id;
 
	var text = nomAbs.substring(0, 4);
	if (text == 'demi'){
 
		openPopinMatinOuApres(idPersonne, index);
		document.getElementById(nameDivAbsence).style.display = 'none';
		var nameDivAbsence = 'demiabs'+position;
 
 
		document.getElementById(absenceSelectedId).options[0].selected = true;
	}else{
		document.getElementById(nameDivDemiAbsence).style.display = 'none';
 
		//ICI METTRE LES VARIABLES A VIDE
		document.getElementById(demiAbsSelectedId).options[0].selected = true;
		}
 
	var nomAbs = document.getElementById(nomAbs);
 
 
	if (nomAbs.checked) {
		document.getElementById(nameDivAbsence).style.display = 'block';
		alert("ici");
		document.getElementById(nameDivHoraire).style.display = 'none';
 
 
		document.getElementById(debutAM).value="00:00";
		document.getElementById(finAM).value="00:00";
		document.getElementById(debutPM).value="00:00";
		document.getElementById(finPM).value="00:00";
 
	}
 
	var nomPres = document.getElementById(nomPres);	
 
	if (nomPres.checked) {
		document.getElementById(nameDivAbsence).style.display = 'none';
		document.getElementById(nameDivHoraire).style.display = 'block';
		document.getElementById(nameDivDemiAbsence).style.display = 'none';
	}
}

Si c'est le bouton demiabsence qui est coché on fait appel à la méthode

Code :

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

1
2
3
4
5
6
7
8
9
 
function openPopinMatinOuApres(idPersonne, index)
{
 
	document.forms["popinDemiAbsPreview"].elements["idPersonneDemiAbs"].value=idPersonne;
	document.forms["popinDemiAbsPreview"].elements["indexDemiAbs"].value=index;
	document.getElementById('divDemiAbsCreate').style.display='block';
 
}

Cette dernière permet d'ouvrir une popin qui permet à l'utilisateur de préciser si la personne travaille le matin ou l'après midi.

popin

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
 
 
<div class="display" id="divDemiAbsCreate">
 
<div class="displayOpct">
 
<table id="tabCreate" align="center" width="600px" cellspacing="0" cellpadding="0" border="0" class="cadb">
	<tbody>
		<tr>
			<td>
				<table width="100%">
					<tr>
						<td width="20" height="20"><img vspace="5" hspace="5" src="./resources/img/cbb.gif">
						</td>
						<td  style="font-size:12px;color: #4891C0;font-weight: bold" id="titre"> 
							Gestion des demi-absences
						</td>
						<td style="font-size:10px;color: #4891C0;font-weight: bold" align="right">
								<A href="#" onclick="closePreview();">Fermer</A>&nbsp;
						</td>
					</tr>
				</table>
			</td>
		</tr>
 
		<!-- Message d'information -->
 
 
		<tr>
			<td align="center">
			<s:form name="popinDemiAbsPreview">	
				<s:hidden name="idPersonneDemiAbs" name="idPersonneDemiAbs" value="" />
				<s:hidden name="indexDemiAbs" name="indexDemiAbs" value="" />			
				<table cellpadding=5 style="width:600;align:center;" class="cadre">
 
					<tr>
						 <td  style="text-align: center;">
						 	Présent le : 
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type = 'radio' name='matinOuApres' value='matin'/>matin
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type = 'radio' name='matinOuApres' value='apres'/>après midi
						 </td>
					</tr>
 
					<tr>
						<td align="center">	
							<input type="button" value="Valider" onclick="returnDemiAbsValue(this.form.matinOuApres);">					
						<br/><br/>
						</td>
					</tr>				
				</table>
				</s:form>
				<br/><br/>
 
 
			</td>
		</tr>
 
	</tbody>
</table>
</div>
 
</div>

Avec cette popin, on fait appel à la fonction returnDemiAbsValue()

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
 
function returnDemiAbsValue(radio){
 
	var idPersonne = document.forms["popinDemiAbsPreview"].elements["idPersonneDemiAbs"].value;
	var index = document.forms["popinDemiAbsPreview"].elements["indexDemiAbs"].value;
 
	var divDemiAbsMatinName = "horaire"+index+"DemiAbsMatin_"+idPersonne;
	var divDemiAbsApresName = "horaire"+index+"DemiAbsApres_"+idPersonne;
 
	var valChamp = "";
	for (var i=0; i<radio.length;i++) {
		 if (radio[i].checked) {
			 valChamp = radio[i].value;
 
		 }
	  }
 
	var idAbsenceSelected = "absenceSelected"+index;
	var nameAbsenceSelected = "demiabsenceSelected"+index+"_"+idPersonne;
	var horairedebDemiAbs = "horaire"+index+"debDemiAbs_"+idPersonne;
	var horairefinDemiAbs = "horaire"+index+"finDemiAbs_"+idPersonne;
	var html = '';
	html = html+		'<td>De <s:textfield name="'+horairedebDemiAbs+'" id="'+horairedebDemiAbs+'" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount('+idPersonne+')"/>A <s:textfield name="'+horairedebDemiAbs+'" id="'+horairedebDemiAbs+'" size="5" maxLength="5" value="00:00" onBlur="javascript:doCount('+idPersonne+')"/></td>';
	//alert("valeur horairedebDemiAbs ")
	if (valChamp == "apres"){	
 
		document.getElementById(divDemiAbsApresName).innerHTML=html;
		document.getElementById(divDemiAbsMatinName).innerHTML="";	
		document.getElementById(divDemiAbsApresName).style.display='block';	
		document.getElementById(divDemiAbsMatinName).style.display='none';
 
		var debutDemiAbs_value = document.getElementById(horairedebDemiAbs).value;
		//alert("DEMI début : "+debutDemiAbs_value);
 
 
 
	}else if (valChamp == "matin"){
		document.getElementById(divDemiAbsApresName).innerHTML="";
		document.getElementById(divDemiAbsMatinName).innerHTML=html;
		document.getElementById(divDemiAbsMatinName).style.display='block';	
		document.getElementById(divDemiAbsApresName).style.display='none';			
	}
 
	//alert("valeur horairedebDemiAbs "+document.getElementById(horairedebDemiAbs).value);
 
	document.getElementById('divDemiAbsCreate').style.display='none';
	var nameDivDemiAbsence = "demiabs"+index+"_"+idPersonne;
	//document.getElementById(nameDivDemiAbsence).style.display = 'block';
}

Le problème que je rencontre se situe niveau du doCount. En effet, les calcules ne sont pas fait u_u'.

Lorsque je vais dans la console d'erreur de firefox, j'ai ce message d'erreur :

Code :

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

1
2
3
4
5
 
Horodatage*: 09/10/2012 20:49:38
Erreur*: TypeError: document.getElementById(debutDemiAbs) is null
Fichier Source*: http://localhost:8080/GestionHoraire/planningManagement_loadPlanning.action
Ligne*: 427

et lorsque je clique sur le lien proposé par la console d'erreur, j'ai ce message d'erreur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="stacktrace" style="padding-left: 0em">
    <strong>java.lang.NumberFormatException: null</strong>
    <div>
    <pre>
    java.lang.Integer.parseInt(Integer.java:417)
    java.lang.Integer.parseInt(Integer.java:499)
    com.maison.enfant.gestion.horaire.action.planning.PlanningAction.loadPlanning(PlanningAction.java:1254)
    sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    java.lang.reflect.Method.invoke(Method.java:597)

Merci beaucoup de votre aide, car là, je ne sais pas comment solutionner mon pb.

**headmax** · 09/10/2012, 21h12

Salut est il possible de nous montre seulement, les js incréminé, et surtout le html généré par ta page JSP.

merci

**headmax** · 09/10/2012, 21h15

D'après ton erreur, il semblerait que cela est du à du code côté serveur, plus précisement JAVA.
Ta functin debutDemiAbs) retoune NULL car le paramètre passer est NULL, check en amont que vaux DemiAbs si, elle contient bien une valeur.

Fonction javascript qui appelle une autre fonction javascript

JavaScript

Discussions similaires

Partager

Partager