innerHTML sur <SELECT> ne marche pas sous IE7
Solution : il semblerait qu'IE7 ne gère pas la mise-à-jour via innerHTML du contenu d'un <SELECT> </SELECT>, et c'est tout.
Pour ésquiver le problème, il faut mettre le select dans une DIV et mettre à jour la DIV (ajout des balises SELECT dans le script JS).
--------------------------------------------
Sujet: completude/innerHTML qui ne marche pas sous IE7
Bonjour, j'ai un soucis avec l'affichage d'une page sous IE7 et pas sous Firefox (aucune erreur avec le debuggeur JS).
Ca doit surement être une erreur de débutant mais je ne la vois pas :?
Il s'agit d'un champ de saisie qu l'on peut completer automatiquement :
- Quand le champ de saisie a le focus, en appuyant sur la flêche du haut/bas on affiche et on va dans une liste de choix.
- Une fois le choix fait, on appuie sur entrée pour que la valeur soit reportée dans le champ de saisie
Je ne suis pas sûr que l'erreur soit dans le script JS (CSS?) mais ce qui est sûr c'est que sous IE7 je n'ai qu'une liste de choix vide qui apparait
voici les fichiers générés et simplifié au max :
test.php
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input type="text" maxlength="8" size="8" name="idMatricule" id="idMatricule" onkeydown="javascript:touchePressee_ChampSaisieMatricule(this,event);" autocomplete="OFF">
<select name="idMatriculeCompletes" id="idMatriculeCompletes" class="invisible" size="8" onkeydown="javascript:touchePressee_ChampCompletudeMatricule(this,event);" autocomplete="OFF" >
</select>
</body>
</html> |
test.js
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
|
/////////////////////////
// AIDE A LA SAISIE ///
/////////////////////////
function touchePressee_ChampSaisieMatricule(champ, event)
{
var touche = event.keyCode;
// Descente(/montée) dans la liste de Choix AIDE A LA SAISIE := flèche Bas/Haut
if(touche == 40 || touche == 38)
{
affCompletudeMatricule(champ.value);
}
}
function touchePressee_ChampCompletudeMatricule(champ, event)
{
var touche = event.keyCode;
// Validation choix (touche Entrée)
if (touche == 13)
{
var champCible= document.getElementById('idMatricule');
champCible.value=champ.value; //on récupère la valeur choisie et on la place dans le champ cible
champCible.focus();//on donne le focus sur le champ cible
effBloc(champ)
}
// Annulation choix (touche Echap)
if (touche == 27)
{
document.getElementById('idMatricule').focus();//on redonne le focus au champ de saisie du matricule
effBloc(champ);
}
}
function affCompletudeMatricule(matriculeIncomplet)
{
xhr = new XMLHttpRequest();
var filename = "testAjax.php";
var data ="matriculeIncomplet="+matriculeIncomplet;
var blocCible = document.getElementById('idMatriculeCompletes');
xhr.onreadystatechange = function()
{
if(xhr.readyState < 4)
{
blocCible.innerHTML='veuillez patienter svp';
}
if(xhr.readyState == 4)
{
blocCible.innerHTML=xhr.responseText;
affBloc(blocCible);
blocCible.focus();
}
};
xhr.open( "POST", filename, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
// Reporte la valeur du matricule dans le champ de saisie
function changerMatricule(matricule)
{
document.getElementById("idMatricule").value=matricule;
}
/**
* efface un bloc
**/
function effBloc(bloc)
{
bloc.className= 'invisible';
}
/**
* affiche un bloc
**/
function affBloc(bloc)
{
bloc.className= 'visible';
} |
testAjax.php
Code:
1
2
3
4
| <option value="0">valeur 0 </option>
<option value="1">valeur 1 </option>
<option value="2">valeur 2 </option>
<option value="" style="color:#0099CC; font-style: italic;"> aucun resultat </option> |
test.css
Code:
1
2
| .visible { display : block; ; visibility : visible ; }
.invisible { display : none; visibility : hidden; } |
Au préalable j'avais fait une page de test qui fonctionne parfaitement sous Firefox et IE7. En revanche elle n'utilisait pas d'AJAX.
... etrange
Si ça peut servir, voilà la page d'essai :
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
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script>
var Choix = new Array("listeChoix1", "listeChoix2", "listeChoix3");
var relationChampChoix = new Array();
// structure : relationChampChoix["IdChamp"] = new Array("IdChampGauche", "IdListecorrespondante", "IdChampDroite")
relationChampChoix["ch1"]= new Array( null ,"listeChoix1", "ch2") ;
relationChampChoix["ch2"]= new Array( "ch1" ,"listeChoix2", "ch3") ;
relationChampChoix["ch3"]= new Array( "ch2" ,"listeChoix3", null) ;
var relationChoixChamp = new Array();
relationChoixChamp['listeChoix1']= 'ch1';
relationChoixChamp['listeChoix2']= 'ch2';
relationChoixChamp['listeChoix3']= 'ch3';
function touchePressee(champ, event)
{
var touche = event.keyCode;
/////////////////////
// Champs de Saisie//
/////////////////////
if( typeof(relationChampChoix[champ.id]) != 'undefined')
{
voisinsChamp= relationChampChoix[champ.id];
// Descente(/montée) dans la liste de Choix := flèche Bas/Haut
if((touche == 40 || touche == 38) && relationChampChoix[champ.id][1] != null)
{
afficherAideSaisieDe(champ);
}
// Champ de gauche
if (touche == 37 && event.shiftKey && relationChampChoix[champ.id][0] != null)
{
document.getElementById(relationChampChoix[champ.id][0]).focus();
}
// Champ de droite
if (touche == 39 && event.shiftKey && relationChampChoix[champ.id][2] != null)
{
document.getElementById(relationChampChoix[champ.id][2]).focus();
}
}
////////////////////
// Champs de Choix//
////////////////////
else if( typeof(relationChoixChamp[champ.id]) != 'undefined')
{
// Validation choix (Entrée)
if (touche == 13)
{
var champCible= document.getElementById(relationChoixChamp[champ.id]);
champCible.value=champ.value; //on récupère la valeur choisie et on la place dans le champ cible
champCible.focus();//on donne le focus sur le champ cible
effacerBloCompletude();
}
// retour au champ sans modif (<- ou -> ou Echap)
if ( (touche == 37 || touche == 39 || (touche == 27) ) && relationChoixChamp[champ.id] != null)
{
document.getElementById(relationChoixChamp[champ.id]).focus();
effacerBloCompletude();
}
}
}
/* affiche le bloc d'aide à la saisie et met le focus dans la liste des choix qu'il propose*/
function afficherAideSaisieDe(champ)
{
var blocAide = document.getElementById(relationChampChoix[champ.id][1]);
effacerBloCompletude();
blocAide.className= 'cadreVisible';
blocAide.focus();
for (var i=0; i<blocAide.options.length; i++)
if(blocAide.options[i].value == champ.value)
blocAide.selectedIndex = i ; //AFAIRE empecher déplacement supplémentaire du à l'appuie sur H/B
}
function effacerBloCompletude()
{
for(var a=0; a<Choix.length; a++)
document.getElementById(Choix[a]).className='cadreCache';
}
</script>
<style>
.champs> * { float: left ; padding : 5px; }
.cadreVisible { display : block; ; visibility : visible ; }
.cadreCache { display : none; visibility : hidden; ; }
/* AFFAIRE: épurer les styles suivants : */
input[type="button"]:hover
{
background:#999999 none repeat scroll 0%;
color:#FFFFFF;
}
input{
border:1px solid #AAAAAA;
}
input[type="button"]{
background:#FFFFFF none repeat scroll 0%;
color:#000000;
padding: 2px;
margin: 6px;
margin-left: 10px;
}
.blocSaisie { margin : 8px ; margin-left : 1px ; margin-right : 1px ; padding:0px}
</style>
</head>
<body>
<form onSubmit="javascript: return(false);">
<div class="champs">
<div class='blocSaisie'>
<input type="text" id="ch1" name="ch1" onkeydown="javascript:touchePressee(this,event);">
<div id="choixCh1">
<SELECT NAME="listeChoix1" id="listeChoix1" size="5" onkeydown="javascript:touchePressee(this,event);">
<OPTION VALUE="0" > la valeur 0 </option><OPTION VALUE="1" > la valeur 1 </option><OPTION VALUE="2" > la valeur 2 </option><OPTION VALUE="3" > la valeur 3 </option><OPTION VALUE="4" > la valeur 4 </option><OPTION VALUE="5" > la valeur 5 </option><OPTION VALUE="6" > la valeur 6 </option><OPTION VALUE="7" > la valeur 7 </option><OPTION VALUE="8" > la valeur 8 </option><OPTION VALUE="9" > la valeur 9 </option><OPTION VALUE="10" > la valeur 10 </option><OPTION VALUE="11" > la valeur 11 </option><OPTION VALUE="12" > la valeur 12 </option><OPTION VALUE="13" > la valeur 13 </option><OPTION VALUE="14" > la valeur 14 </option><OPTION VALUE="15" > la valeur 15 </option><OPTION VALUE="16" > la valeur 16 </option><OPTION VALUE="17" > la valeur 17 </option><OPTION VALUE="18" > la valeur 18 </option><OPTION VALUE="19" > la valeur 19 </option> </SELECT>
</div>
</div>
<div class='blocSaisie'>
<input type="text" id="ch2" name="ch2" onkeydown="javascript:touchePressee(this,event);">
<div id="choixCh2">
<SELECT NAME="listeChoix2" id="listeChoix2" size="3" onkeydown="javascript:touchePressee(this,event);">
<OPTION VALUE="Mr" > Mr </option>
<OPTION VALUE="MME"> Mme </option>
<OPTION VALUE="MLLE"> Mlle </option>
</SELECT>
</div>
</div>
<div class='blocSaisie'>
<input type="text" id="ch3" name="ch3" onkeydown="javascript:touchePressee(this,event);">
<div id="choixCh3">
<SELECT NAME="listeChoix3" id="listeChoix3" size="1" onkeydown="javascript:touchePressee(this,event);" >
<OPTION VALUE="A"> A </option>
<OPTION VALUE="B"> B </option>
<OPTION VALUE="C"> C </option>
<OPTION VALUE="D"> D </option>
<OPTION VALUE="E"> E </option>
<OPTION VALUE="F"> F </option>
</SELECT>
</div>
</div>
<input type="button" value="Valider !">
</div>
</form>
<script> effacerBloCompletude(); </script>
</body>
</html> |
