Condition pour cacher une div

**leara500** · 30/04/2013, 21h07

Bonjour,

Je développe une application des gestion des horaire et je cherche à faire en sorte qu'une div soit cachée.
En effet, pour une personne donnée, elle ne doit pas apparaitre dans le planning si son horaire contrat est égale de 00:00 et que le nombre d'heure travaillé est égale à vide

Dès lors, il faut que 2 conditions soit remplis :
- Le nombre d'heure contrat doit être égale à : 00:00
- Le nombre d'heure faite doit être vide.

J'ai donc fait ce bout de code tout simple :

Code :

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

1
2
3
4
if((nbHeureAFaire == "00:00") && (variableNbHeureFaite == "")){
//alert("Nb heure = 00:00");
	document.getElementById(lignePersonne).style.display = 'none';
}

quand je fais mes alertes

Code :

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

1
2
alert("nbHeureAFaire :"+nbHeureAFaire);
alert("nbHeureFaite : "+nbHeureFaite);

J'ai bien les bonnes valeurs qui apparaissent, mais alors que pour certaines personnes, c'est 2 conditions soit remplies, elles apparaissent dans le planning.

D'où vient le problème ? Merci beaucoup de votre aide

**andry.aime** · 01/05/2013, 06h19

Bonjour,

Peut-on voir le code HTML et la fonction complète?

A+.

**leara500** · 01/05/2013, 09h33

Merci beaucoup pour votre réponse

Donc, voici la fonction complète, qui gère entre autre, l'affichage ou non de certaine div

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
function verifCouleur(){
	var idArray = [];
	var elements = document.getElementsByName('idPersonneSelected') ;
 
	var dateAujourdhuiVar = dojo.widget.byId("dateModif").getDate();
	xx(dojo.widget.byId("dateModif").getDate());
 
	var jourdhui=new Date();
	var jour=xx(jourdhui.getDate());
	var mois=xx(jourdhui.getMonth()+1);
	var an=xx(jourdhui.getFullYear());
 
	var dateAujourdhuiValue = jour+'-'+mois+'-'+an;
	//alert("dateAujourdhui : "+dateAujourdhuiValue);
 
 
	var typeDeLaSemaine = "typeSemaine";
	var typeSemaineValue = document.getElementById(typeDeLaSemaine).value;
 
	var cdd = document.getElementById('gestionCDD').options[document.getElementById('gestionCDD').selectedIndex].id;
 
 
		var idPersonneAffichageDate ='';
		for (var i=0, n=elements.length; i<n; i++){
		//alert("nb : "+elements.length);
		idArray.push(elements.value);
		var idPersonne = elements[i].value;
		//alert("idPersonne :"+idPersonne);
 
		//Variable contenant l'id de la personne - utilisation du <tbody>
		var lignePersonne = "idPers_"+idPersonne;
 
 
 
		var variableNbHeureAfaire = "nbHeureAfaire_"+idPersonne;
		var nbHeureAFaire = document.forms["createForm"].elements[variableNbHeureAfaire].value;
		//alert("nbHeureAFaire : "+nbHeureAFaire);
 
		var variableNbHeureFaite = 'nbHeureFaite_'+idPersonne;
		var nbHeureFaite = document.forms["createForm"].elements[variableNbHeureFaite].value;
 
 
		var div_res = 'div_nbHeureFaite_'+idPersonne;
 
		/*if(nbHeureFaite == null){
			document.getElementById(div_res).innerHTML== "00:00 heure";
		}*/
 
 
		/*alert("div_res :"+div_res);
		alert("nbHeureAFaire :"+nbHeureAFaire);
		alert("nbHeureFaite : "+nbHeureFaite);
		*/
 
		if((nbHeureAFaire == "00:00") && (variableNbHeureFaite == "")){
			//alert("Nb heure = 00:00");
			document.getElementById(lignePersonne).style.display = 'none';
		}
 
		//alert("nbHeureFaite : "+nbHeureFaite);
		/*if((nbHeureFaite == "")&&(cdd != 'oui' )){
			//alert("On cache les CDD ");
			document.getElementById(lignePersonne).style.display = 'none';
		}*/
 
 
 
 
 
 
 
		if(nbHeureAFaire != nbHeureFaite){
			//alert("Valzue non égale");
			document.getElementById(div_res).style.color = "red";
		} else{
			document.getElementById(div_res).style.color = "black";
		}
 
 
 
 
 
 
		//Pour mettre en évidence les heure travailler le Week and
		/*var horaireSamedi = "divHoraireModif6_"+idPersonne;
		var horaireDimanche = "divHoraireModif7_"+idPersonne;
 
		if(document.getElementById(horaireSamedi) != null){
			document.getElementById(horaireSamedi).style.backgroundColor = "#EDAA44";
			document.getElementById(horaireSamedi).style.color = "red";
 
		}
		if(document.getElementById(horaireDimanche) != null){
			document.getElementById(horaireDimanche).style.backgroundColor = "#EDAA44";
			document.getElementById(horaireDimanche).style.color = "red";
 
		}
		*/
		//Pour mettre en couleur si les horaires ont été modifié
		//On met 25 pour que çà fonctionne pour tout le monde car à 8, çà ne marche pas pour tous
		 for(n=1; n<25; n++) {
 
 
 
		if((n==1 )|| (n<8)){
 
			//Pour indiquer le jour (lundi, mardi, etc)
			//Pour ne récupérer les info du jour qu'une seul fois.
			if(i == 1){
				idPersonneAffichageDate = idPersonne;
 
 
				var dateComplet="dateComplet"+n+"_"+idPersonneAffichageDate;
 
				//alert("dateComplet : "+dateComplet);
 
				if(document.getElementById(dateComplet) != null){
					dateJourValue = document.getElementById(dateComplet).value;
					//Pour afficher le lundi
					if(n==1){
						document.getElementById('lundi').innerHTML= dateJourValue;
					}
					if(n==2){
						document.getElementById('mardi').innerHTML= dateJourValue;
					}
					if(n==3){
						document.getElementById('mercredi').innerHTML= dateJourValue;
					}
					if(n==4){
						document.getElementById('jeudi').innerHTML= dateJourValue;
					}
					if(n==5){
						document.getElementById('vendredi').innerHTML= dateJourValue;
					}
					if(n==6){
						document.getElementById('samedi').innerHTML= dateJourValue;
					}
					if(n==7){
						document.getElementById('dimanche').innerHTML= dateJourValue;
					}
 
				}
 
			}
 
 
			 	var divHoraire = "divJour"+n+"_"+idPersonne; // pour savoir l'horaire de travail de la personne
				//var divHoraire = "horaire"+n+"_"+idPersonne; // pour savoir l'horaire de travail de la personne
				var varModifJour = "ModifJour"+n+"_"+idPersonne; //Pour savoir si l'horaire a été modificie
				var dateJour = "jour"+n;
				var divDemiAbs = "divDemiAbsenceModif"+n+"_"+idPersonne;
				var divAbs = "divAbsenceModif"+n+"_"+idPersonne;
				var divJour = "divJour"+n+"_"+idPersonne;
 
 
				//Pour que les heure travaillé soit coloré
				var divHoraireModif = "divHoraireModif"+n+"_"+idPersonne;
				var divDemiAbsenceModif = "divDemiAbsenceModif"+n+"_"+idPersonne;
				//Utilisé pour mettre en couleur les absence
				var absenceSelectedId = "absenceSelected"+n+"_"+idPersonne;
		}
 
 
 
				var dateJourValue = '';
				if(document.getElementById(dateJour) != null){
					dateJourValue = document.getElementById(dateJour).value;
				}
 
 
				//alert("dateJourValue : "+dateJourValue);
 
				//Pour mettre en évidence la date d'aujourd'hui
				if(dateAujourdhuiValue == dateJourValue){
					//alert("ICICICICICCI divJour : "+divJour);
 
					document.getElementById(divJour).style.backgroundColor = "#6BD8CA";
					document.getElementById(divDemiAbs).style.color  = "green";
					document.getElementById(divHoraire).style.color  = "green";
					document.getElementById(divAbs).style.color  = "green";
 
				}
 
 
 
 
				//alert("valeur : "+document.getElementById(varModifJour).value);
				if(document.getElementById(varModifJour) != null ){
 
					if(document.getElementById(varModifJour).value == 'oui'){
 
						document.getElementById(divDemiAbs).style.color = "red";
						document.getElementById(divHoraire).style.color = "red";
 
					}
				}
 
 
 
				/*if((n!=6)|| (n!=7)){
					if(document.getElementById(divHoraireModif) != null){
							document.getElementById(divHoraireModif).style.backgroundColor = "#56B50E";
 
					}
					if(document.getElementById(divDemiAbsenceModif) != null){
						document.getElementById(divDemiAbsenceModif).style.backgroundColor = "#56B50E";
 
					}
				}*/
 
 
				//Pour mettre en évidence les congés pris
				//alert("divAbs :"+divAbs);
					if(document.getElementById(absenceSelectedId).value != '' && document.getElementById(absenceSelectedId).value != null){ 
						// Congé annuel
							//alert("divHoraire : "+divHoraire);
							if(document.getElementById(absenceSelectedId).value == 1 ){
								document.getElementById(divAbs).style.backgroundColor  = "#EAA8EC";
								document.getElementById(divAbs).style.color  = "black";
							}//CT
							if(document.getElementById(absenceSelectedId).value ==2 ){
								document.getElementById(divAbs).style.backgroundColor  = "#6673E8";
							 	document.getElementById(divAbs).style.color  = "white";
							}
							//Repos
							if(document.getElementById(absenceSelectedId).value == 3 ){
								document.getElementById(divAbs).style.backgroundColor  = "#56B50E";
							 	document.getElementById(divAbs).style.color  = "black";
							}
 
 
							//Ferie
							if(document.getElementById(absenceSelectedId).value ==4 ){
								document.getElementById(divAbs).style.backgroundColor  = "#E8B866";
								document.getElementById(divAbs).style.color  = "black";
							}
							//Anciennté
							if(document.getElementById(absenceSelectedId).value ==6 ){
								document.getElementById(divAbs).style.backgroundColor  = "#66E8D6";
								document.getElementById(divAbs).style.color  = "black";
							}
							//Formation
							if(document.getElementById(absenceSelectedId).value ==10 ){
								document.getElementById(divAbs).style.backgroundColor  = "#F9371A";
								document.getElementById(divAbs).style.color  = "black";
							}
 
 
					}
 
 
		}
 
 
	}
 
 
}

Après pour le code html, il est assez conséquent u_u' étant donnée que j'utilise le jsp. Mais je vous met le code qui correspond aux variables dont je dois vérifier la valeur

Code html :

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
	<tbody id="idPers_<s:property value="%{personneDto.idPersonne}"/>">  
 
<s:hidden id="idPersonneSelected" name="idPersonneSelected" value="%{personneDto.idPersonne}"/>
 
	<td><s:property value="serviceDto.nomService"/></td>
	<td>  <b><s:property value="personneDto.nom"/> 
		<s:property value="personneDto.prenom"/> <br> </b>
 
		<div id="heureContrat">
			 Heure contrat : <br>
			<input type="hidden" name="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/>" id="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/>" value="<s:property value='personneDto.horaireContrat'/>">
 
 
 
		<div id="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/> "> <s:property value="personneDto.horaireContrat"/> Heure</div>
		</div>
		Heure Realisé : <br>
		<input type="hidden" name="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" id="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" value="<s:property value='compteurDto.horaireFaite'/>">
		<div id="div_nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>"> <s:property value='compteurDto.horaireFaite'/> heure</div>
 
		<div id="divVerif"> 
			<div id="divVerifnbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" > 
			</div>
		</div>
 
	</td>
 
 
etc ....

Merci beaucoup de votre aide

**leara500** · 01/05/2013, 10h07

Au final, j'ai réussi à solutionner le problème en comptant le nb de caractère de mes variable ^^

Pour info, pour ceux que çà pourrait intéresser :

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
 
var variableNbHeureAfaire = "nbHeureAfaire_"+idPersonne;
		var nbHeureAFaire = document.forms["createForm"].elements[variableNbHeureAfaire].value;
 
var variableNbHeureFaite = 'nbHeureFaite_'+idPersonne;
		var nbHeureFaite = document.forms["createForm"].elements[variableNbHeureFaite].value;
 
 
 
var nbCaractereNbHeureAfaire = document.getElementById(variableNbHeureAfaire).value.length; 
		var nbCaractereNbHeureFaite = document.getElementById(variableNbHeureFaite).value.length; 
 
 
 
 
 
		if((nbHeureAFaire == "00:00") && (nbCaractereNbHeureFaite == 0)){
			alert("On cache la div");
			document.getElementById(lignePersonne).style.display = 'none';
		}

Merci encore de votre aide

Condition pour cacher une div

JavaScript

Discussions similaires

Partager

Partager