affichage de popin

Bonjour,

Je développe une application des gestion des horaires et j'utilise le javacript pour renseigner les champs.
Ainsi, une personne peut être :

présente toute la journée (matin et après midi)
être absente (toute la journée),
ou être là le matin ou l'après midi et être ensuite absente dans la même journée

Lorsque je clique une première fois sur présent toute la journée (PR), je ne rencontre pas de pb d'affichage
[IMG]http://img11.hostingpics.net/pics/662961image1.jpg[/IMG]

Lorsque je clique sur absente (NPR), j'ai bien mon menu déroulant avec ma liste d'absence qui s'affiche.
[IMG]http://img11.hostingpics.net/pics/846325image2.jpg[/IMG]

Le soucis vient du fait lorsque je re-clique sur PR (la personne travaille toute la journée) : Ca ne fonctionne pas.
[IMG]http://img11.hostingpics.net/pics/485689image3.png[/IMG]

Ce que je souhaiterais, c'est que lorsque je re-clique sur (PR), la même chose apparaissent que lorsque je clique dessus pour la première fois.

Voici donc les champs présent dans mon formulaire :

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
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
 
<div class="display" id="divCreate">
 
<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"> 
							Modification horaire
						</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>
				<table>
					<tr>
						<td>&nbsp;</td>
						<td>
							<table id="infoMsg">
								<tbody>
									<tr>
										<td></td>
									</tr>
								</tbody>
							</table>
						</td>
						<td>&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
 
		<tr>
			<td align="center">
			<s:form name="popinPreview">
				<s:hidden name="idPersonnePreview" name="idPersonnePreview" value="" />
				<s:hidden name="indexPreview" name="indexPreview" value="" />
				<table cellpadding=5 style="width:600;align:center;" class="cadre">
					<tr>
						<td> Horaire enregistré en base de données</td>
					</tr>	
					<tr>
						<td>
							<div id="day"></div>
							<div id="people"></div>
						</td>
					</tr>
					<tr>
						<td>
							<div id="hours"></div>
							<div id="absencess"></div>
							<div id="halfAbsence"> </div>
						</td>
 
 
					</tr>					
					<tr>
						<td><hr></td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						  	<input type="radio" id="demiab0" name="work" value="0" onchange="afficheDiv('0_<s:property value="%{personneDto.idPersonne}"/>', 'demiab0_<s:property value="%{personneDto.idPersonne}"/>', 'pres0_<s:property value="%{personneDto.idPersonne}"/>')"> 1/2 PR 
							<input type="radio" id="ab0" name="work" value="0" onchange="afficheDiv('0_<s:property value="%{personneDto.idPersonne}"/>', 'ab0_<s:property value="%{personneDto.idPersonne}"/>', 'pres0_<s:property value="%{personneDto.idPersonne}"/>')">NPR 
							<input type="radio" id="pres0" name="work" value="1" onchange="afficheDiv('0_<s:property value="%{personneDto.idPersonne}"/>', 'ab0_<s:property value="%{personneDto.idPersonne}"/>', 'pres0_<s:property value="%{personneDto.idPersonne}"/>')" checked="checked"> PR<br>
								<div id="horaire0" style="display: block;">
						    	<table border="1" align="center">
						    		<tr>
						    			<td>						    				
						    				De <s:textfield name="horairedm" id="horairedm" size="5" maxLength="5" value=""/> 
						    				 A<s:textfield name="horairefm" id="horairefm" size="5" maxLength="5" value=""/>
						    			</td>
						    		</tr>
						    		<tr>
						    			<td>
						    				De <s:textfield name="horaireda" id="horaireda" size="5" maxLength="5" value=""/>
						    				A<s:textfield name="horairefa" id="horairefa" size="5" maxLength="5" value=""/>
						    			</td>
						    		</tr>
						    	</table>
						    	</div>
						    	<div id="abs0" style="display: none;">
						    	<table border="1" align="center">
						    		<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 -->
 
							    		<td>
							    		   <s:select headerKey="-1" headerValue="Abs ?" id="absenceSelected" name="absenceSelected" list="listAbsenceDto" listKey="idAbsence" listValue="abrAbsence"></s:select>
						    			</td>
						    		</tr>
						    	</table>
						    	</div>
						    	<div id="demiabs0" style="display: none;">
						    	<table border="1" align="center">
						    		<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>
						    				<td>
							    				<div id="horaire0DemiAbsMatin"></div>
						    				</td>
						    			</tr>
							    		<td>
							    			<s:select headerKey="-1" headerValue="Abs ?" id="demiAbsenceSelected" name="demiAbsenceSelected" list="listAbsenceDto" listKey="idAbsence" listValue="abrAbsence"></s:select>
						    			</td>
						    		</tr>
						    		<tr>
							    		<td>
							    			<div id="horaire0DemiAbsApres"></div>
						    			</td>
						    		</tr>
						    	</table>
						    	</div>
						    </td>
 
					</tr>
 
 
					<tr>
						<td align="center">	
							<input type="button" value="Valider" onclick="returnPreview();">					
						<br/><br/>
						</td>
					</tr>				
				</table>
				</s:form>
				<br/><br/>
 
 
			</td>
		</tr>
 
	</tbody>
</table>
</div>
 
</div>

Le javascript qui gère l'affichage des info dans la popin

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
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
 
function afficheDiv(position, nomAbs, nomPres)
{
 
	//RECUPERATION DES INDEX ET ID PERSONNE
	var chaine = position;
	var tableau=chaine.split("_");
	var index = tableau[0];
 
	var stringNomAbs = nomAbs;
	var tabNomAbs = stringNomAbs.split("_");
	var nomAbs = tabNomAbs[0];
 
 
	//DECLARATION DES DIV
	var nameDivHoraire = 'horaire'+index;
	var nameDivAbsence = 'abs'+index;
	var nameDivDemiAbsence = 'demiabs'+index;
 
	//var idPersonne = tableau[1];
	var idPersonne = document.forms["popinPreview"].elements["idPersonnePreview"].value;
 
	//Déclaration des Div Modification 
	var nameDivHoraireModif = "divHoraireModif"+index+'_'+idPersonne;
	var nameDivAbsenceModif = "divAbsenceModif"+index+'_'+idPersonne;
	var nameDivDemiAbsenceModif = "divDemiAbsenceModif"+index+'_'+idPersonne;
 
	//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;
 
	if(document.getElementById(debutAM)==null){
		//alert("debutAM est nulle");
		document.getElementById(nameDivHoraire).innerHTML= 'horaire'+index+'dm_'+idPersonne;
		//alert("Création variable "+document.getElementById(debutAM));
 
	}
	//DECLARATION DES NOMS DE VARIABLES (select)
 
	//var absenceSelectedId = "absenceSelected"+index+"_"+idPersonne;
	//var demiAbsSelectedId = "demiabsenceSelected"+index+"_"+idPersonne;
	var absenceSelectedId = "absenceSelected";
	var demiAbsSelectedId = "demiAbsenceSelected";
	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'+index;
		//alert("new nameDivAbsence : "+nameDivAbsence);
		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';
 
		if(document.getElementById(debutAM)!=null){
			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 stringNomPresent = nomPres;
	var tabNomPres = stringNomPresent.split("_");
	var nomPres = tabNomPres[0];
	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';
	}
}

Je vous remercie d'avance pour votre aide.