innerHTML sur <SELECT> ne marche pas sous IE7

**matoon** · 31/03/2008, 12h29

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 :

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
 
        <!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 :

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
 
 
  /////////////////////////
 //  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 :

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

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 :

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

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 :

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
<!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>

**SpaceFrog** · 31/03/2008, 13h43

Code :

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

  var touche = event.keyCode;

la gestion des évènements difère sous IE et FFX ...

**matoon** · 31/03/2008, 14h00

Bonjour SpaceFrog.
Justement, j'ai fait en sorte que IE et FFX soient gérer. Un petit alert(xhr.responseText); dans le bloc "ajax" montre que l'évenement "touche pressée" est bien gèré et que les données sont correctement renvoyée. Serieusement je capte pas où est l'erreur.

**FremyCompany** · 31/03/2008, 18h43

Sinon, moi je fais ainsi pour compenser le bug d'IE :

Code :

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

1
2
3
4
5
6
7
var theSelect = ...;
if (window.ActiveXObject) {
   var HTML = [theSelect.outerHTML.replace(new RegExp("</select>","i"),''), '<option>...</option>', '</select>');
   theSelect.outerHTML = HTML.join('');
} else {
   theSelect.innerHTML += '<option>...</option>';
}

Ps: tapé ca vite comme ca, teste et dis moi si cela ne marche pas

innerHTML sur <SELECT> ne marche pas sous IE7

JavaScript

Discussions similaires

Partager

Partager