Salut,

Bon j'ai un gros problème... Internet Explorer !

L'application suivante fonctionne en AJAX avec le FrameWork Prototype.js
et des SpaffyDom (recette locale de génération de DOM)

le code de la page internet est le suivant :
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Outil DCL : Déplacement de Charges Lourdes</title>
 
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="Interaction_BDD.js"></script>
    <script type="text/javascript" src="Manage_DOM_BodyAppend.js"></script>
 
</head>
 
<body style="background:#000000;">
 
<input type="text" id="tata"/>
<input type="hidden" id="toto" value=""/>
<input type="button" value="CLICK" onclick="showGestionBddAjouter('deplacement'/*,'noObject'*/);"/>
 
<div id="txtHintTest"></div>
 
<script type="text/javascript">
var test = createDom( {"obj":"div"} );
createDom( {"obj":"script","type":"text/javascript","innerHTML":"document.getElementById('toto').value = 'hello';"} );
closeDom(test,'Test');
</script>
 
</body>
 
</html>
Le code du fichier Manage_DOM_BodyAppend.js est le suivant (il permet d'afficher le formulaire de saisie avant AJAX et la fiche réponse après AJAX) :
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
/* Ces fonctions permettent de générer des balises HTML et de les hierarchisées dans le cadre de l'utilisation de DOM en JAVASCRIPT */
 
Flux = new Array();
var isIE =(document.all)?true:false;
 
/*	Ajout d'une fonction pour un Array permettant de déterminer la position d'un objet dans l'array 'Flux' créé précédemment */
 
Array.prototype.ArrayPos = function(monArray){
								var maPosition = -1;
								for (i=0;this[i];i++) {
									if (monArray == this[i]) {
										maPosition = i;
										}
									}
								return maPosition;
								}
 
 
/*	Fonction qui permet d'appender les objets DOM entre eux
	La racine de l'arbre étant à définir dans le 'if'
	Cette racine se réfère à une cible située dans le code HTML et accessible via document.getElementById('cible').[...] */
 
function closeDom(Closing,target){
	var FluxPos = Flux.ArrayPos(Closing)
	var FluxLength = Flux.length;
	var SpliceLength = FluxLength-FluxPos+1;
	var AppendLot = Flux.splice(FluxPos+1,SpliceLength);
 
	for(l=0;AppendLot[0];l++) {
		Closing.appendChild(AppendLot.shift())
        }
	if(Flux.length == 1) {
		//document.body.appendChild(Flux.pop());
		document.getElementById('txtHint'+target).appendChild(Flux.pop())
		}
	}
 
 
 
 /* Fonction qui permet la création des objets et leur associe les attributs correspondant
 	Hash : permet d'associer à une 'key' -> une 'value'
 	L'array 'Flux' est incrémenté de l'objet 'Onj' créé
 	Les propriétés de styles doivent être rédigées dans le langage JAVASCRIPT */
 
function createDom(HasH) {
	var Elt='';
	var Special=false;
 
	switch(HasH['type']) {
 
		case('text' ):
			Elt = (isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
			Special = (isIE)?true:false;	
		break;
 
		case('hidden' ):
			Elt = (isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
			Special = (isIE)?true:false;	
		break;
 
		case('radio' ): 
			Elt = (isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
			Special = (isIE)?true:false;	
		break;
 
		case('checkbox' ):
			Elt = (isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
			Special = (isIE)?true:false;	
		break;							 
 
		case('text/javascript' ):
			Elt = (isIE)?'<script type="'+HasH['type']+'">':HasH['obj'];
			Special = (isIE)?true:false;	
		break;
 
		default:
			Elt = HasH['obj'];
			Special = (isIE)?true:false;
		}
 
 	if(HasH['obj'] == 'form') {
		Elt = (isIE)?'<form name="'+HasH['name']+'">':HasH['obj'];
	    Special = (isIE)?true:false;
	                         }
 
	if(HasH['obj'] == 'label') {
		Elt = (isIE)?'<label for="'+HasH['htmlFor']+'">':HasH['obj'];
	    Special = (isIE)?true:false;
	                         }
 
	if(HasH['obj'] == 'select') {
		Elt = (isIE)?('<select name="'+HasH['name']+'" '+((HasH['multiple'] == 1)?'multiple ':'')+' >'):HasH['obj'];
		Special = (isIE)?true:false;
	    }
 
	var Obj = document.createElement(Elt);
	for (elt in HasH) {
		if (elt != 'obj') {
			if(elt == 'css') {
				for(Styl in HasH['css']) {
					Obj.style[Styl] = HasH['css'][Styl];
					}
				}
 
			else { 
				if(isIE) {
					//alert(elt);
					if(!Special || (elt!='name' && elt!='htmlFor' ) || (elt!='name' && elt!='form' ) || (elt!='name' && elt!='select' )) {
						Obj[elt] = HasH[elt];
						}
					}			
			 	else {
			 		Obj[elt] = HasH[elt];
					}				   
				}	
			}
 		}
	Flux.push(Obj);	
	return Obj; 
	}
 
 
/* GENERAL -> Fonction de réinitialisation d'un textHint dans un content */
 
function RTHC(name) {
	document.getElementById('txtHint' + name).innerHTML = '';
	} 
 
 
// Fonction de renvoi de données issues d'un formulaire vers la page HTML après insertion
 
function showGestionBddAjouter(str/*,data*/) {
 
		var fieldsetForm1CSS = 'position:relative; border:solid; border-width:2px; border-color:#C40000; width:748px; margin-left:7px; padding-top:47px; padding-left:15px; padding-bottom:0px; background-image:url("Images/Modele/content_TDS_background.png"); background-repeat:repeat-x;';
		var fieldsetForm2CSS = 'position:relative; border:solid; border-width:2px; border-color:#C40000; width:748px; margin-left:7px; padding-top:25px; padding-left:15px; padding-bottom:24px;  background-image:url("Images/Modele/content_TDS_background.png"); background-repeat:repeat-x;';
		var myDivBlockCSS = 'position:relative; margin-top:-20px; padding:0px';
		var labelCSS = 'position:relative; margin:0px; padding:0px; color:#FFFFFF; font-family:verdana; font-size:13px; font-weight:bold; vertical-align:middle;';
		var imgTextbox = 'content_form_textbox.png';
		var selectCSS = 'position:relative; width:223px; top:2px; left:-200px; border:none; font-family:verdana; font-size:14px; color:#222222; ';
		var selectCapaciteCSS = 'position:relative; width:60px; top:2px; left:0px; border:none; font-family:verdana; font-size:14px; color:#222222; ';
		var imgTextboxCSS = 'position:relative; left:27px; top:9px; z-index:4;';
		var textboxCSS = 'position:relative; width:223px; top:2px; left:-200px; border:none; color:#222222; font-family:verdana; font-size:14px; z-index:4;';
		var myListULCSS = 'margin:0px; margin-left:-2px; padding:0px; width:226px; max-height:20em; overflow:auto;';
		var myListLICSS = 'margin:0px; padding:0px; padding-top:0px; padding-left:4px; display:block; font-family:arial; font-size:13px; color:#444444; vertical-align:middle; background-color:#FFFFFF;';
		var txtHintCSS = 'position:relative; top:-16px; left:280px; font-family:verdana; font-size:13px; color:#E50000;';
		var myInputHintCSS = 'position:relative; width:500px; visibility:hidden;';
		var submitCSS = 'position:relative; top:0px; width:85px; height:28px; margin-top:0px; margin-bottom:20px; padding-bottom:5px; cursor:pointer; background:#333333; color:#FFFFFF; border-width:1px; border-style:solid; border-color:#C40000; font-family:verdana; font-size:12px; font-weight:bold;';
		var fieldsetValidCSS = 'position:relative; left:340px;';
 
	/* texte d'accueil pour l'éléments à ajouter */
 
	alert(str);
 
	switch(str) {		
 
		case 'deplacement':
 
			var myDivAlignCSS = 'position:relative; top:-30px; left:180px;';
 
			var myForm = createDom( {"obj":"form","name":"form_ajouter_deplacement","id":"form","method":"post"} );
				var myFieldset1 = createDom( {"obj":"fieldset","css":{"cssText":fieldsetForm1CSS} } );
					var myDivBlock1 = createDom( {"obj":"div","id":"autocomplete","css":{"cssText":myDivBlockCSS} } );
						createDom( {"obj":"label","htmlFor":"SF_deplacement","innerHTML":"Type de d\351placement :","css":{"cssText":labelCSS} } );    		
						var myDivAlign1 = createDom( {"obj":"div","css":{"cssText":myDivAlignCSS} } );
							createDom( {"obj":"img","src":imgTextbox,"css":{"cssText":imgTextboxCSS} } );
							createDom( {"obj":"input","type":"hidden","id":"S_deplacement","name":"switchDirection","value":"0000060"} );
							createDom( {"obj":"input","type":"text","name":"SF_deplacement","id":"SF_deplacement","onclick":function(){RTHC('1')},"css":{"cssText":textboxCSS} } );
							createDom( {"obj":"div","id":"SFP_deplacement"} );
							var myListUL = createDom( {"obj":"ul","css":{"cssText":myListULCSS} } );
								var myListLI = createDom( {"obj":"li","css":{"cssText":myListLICSS} } );
									createDom( {"obj":"a","href":"#"} );
								closeDom(myListLI,'Test');
							closeDom(myListUL,'Test');
							//myCode = "document.getElementById('markerAuto').value = document.getElementById('S_deplacement').name + '=' + document.getElementById('S_deplacement').value; initAutocomplete('SF_deplacement','SFP_deplacement',document.getElementById('markerAuto').value);";
							myCode = "function testScript() {alert('hello');}";
							var myScript = createDom( {"obj":"script","type":"text/javascript","innerHTML":myCode} );
							closeDom(myScript,'Test');
							createDom( {"obj":"input","type":"hidden","name":"nom_deplacement_1","id":"Field1","value":"test_AJAX_IE"} );
 
							createDom( {"obj":"div","id":"txtHint1","css":{"cssText":txtHintCSS} } );
						closeDom(myDivAlign1,'Test');
					closeDom(myDivBlock1,'Test');
				closeDom(myFieldset1,'Test');
 
				createDom( {"obj":"input","type":"text","id":"sender","value":"","css":{"cssText":myInputHintCSS} } );
 
				var myFieldset3 = createDom( {"obj":"div","css":{"cssText":fieldsetValidCSS} } );
					var mySubmit = createDom({"obj":"input","type":"button","value":"valider","onmouseover":function(){this.style.backgroundColor='#C40000'; this.style.borderColor='#333333';},"onmouseout":function(){this.style.backgroundColor='#333333'; this.style.borderColor='#C40000';},"onclick":function(){/*sendForm(1);*/testScript();},"css":{"cssText":submitCSS} } );
				closeDom(myFieldset3,'Test');
			closeDom(myForm,'Test');
 
		break;
 
		default:
 
		}
	}
 
 
 
function sendFormResponse(str,object) {
 
	/* Déclaration des variables pour le style CSS */
 
	var myDivModifyCSS = 'position:relative; left:640px; margin:0px; padding:0px;';
	var myDivModifyStyleCSS = 'position:relative; margin:0px; padding:0px; font-size:14px; font-weight:bold; font-family:verdana; color:#FFFFFF;';
	var imgBackground = 'url("Images/Modele/content_TDS_background_uploadFile.png")';
	var titleColor = '#FFFFFF';
	var responseColor = '#C40000';
	var submitCSS = 'position:relative; top:0px; width:85px; height:28px; margin-top:0px; margin-bottom:20px; padding-bottom:5px; cursor:pointer; background:#333333; color:#FFFFFF; border-width:1px; border-style:solid; border-color:#C40000; font-family:verdana; font-size:12px; font-weight:bold;';
	var fieldsetValidCSS = 'position:relative; left:625px;';
 
	/* texte d'accueil pour l'éléments à ajouter */
 
	switch(str) {
 
		case 'deplacement':
 
			var myBigDivCSS = 'position;relative; margin:0px; padding:0px;';
			var fieldsetForm1CSS = 'position:relative; border:solid; border-width:2px; border-color:#C40000; width:731px; margin-left:13px; padding-top:20px; padding-left:20px; padding-bottom:0px; background-image:' + imgBackground + '; background-repeat:repeat-x;';
			var myTDSTitleCSS = 'position:relative; margin:0px; padding:0px; padding-bottom:50px; font-size:20px; font-weight:bold; font-family:verdana; color:#FFFFFF;';
			var myDivBlockCSS = 'position:relative; margin:0px; padding:0px; padding-bottom:10px;';
			var myDivLgnCSS = 'position:relative; margin:0px; margin-top:-25px; padding:0px;';
			var myInfoTitleCSS = 'position:relative; margin:0px; padding:0px; font-size:14px; font-weight:bold; font-family:verdana; color:' + titleColor + ';';
			var myInfoCSS = 'position:relative; top:-17px; left:70px; margin:0px; padding:0px; font-size:14px; font-weight:bold; font-family:verdana; color:' + responseColor + ';';
 
			var nom_deplacement = object.BDD.nom_deplacement;
 
			var myBigDiv = createDom( {"obj":"div","id":"TDS","css":{"cssText":myBigDivCSS} } );
				var myFieldset1 = createDom( {"obj":"fieldset","css":{"cssText":fieldsetForm1CSS} } );
					createDom( {"obj":"div","innerHTML":"Fiche Technique d\'un D\351placement","css":{"cssText":myTDSTitleCSS} } );
					var myDivBlock1 = createDom( {"obj":"div","css":{"cssText":myDivBlockCSS} } );
						var myDivLgn1 = createDom( {"obj":"div","css":{"cssText":myDivLgnCSS} } );
							createDom( {"obj":"div","innerHTML":"Type :","css":{"cssText":myInfoTitleCSS} } );
							createDom( {"obj":"div","innerHTML":nom_deplacement,"css":{"cssText":myInfoCSS} } );
						closeDom(myDivLgn1,'Test');
					closeDom(myDivBlock1,'Test');
 
					var myDivModif = createDom( {"obj":"div","css":{"cssText":fieldsetValidCSS} } );
						var mySubmit = createDom({"obj":"input","type":"button","value":"modifier","onmouseover":function(){this.style.backgroundColor='#C40000'; this.style.borderColor='#333333';},"onmouseout":function(){this.style.backgroundColor='#333333'; this.style.borderColor='#C40000';},"onclick":function(){extractDataFromOne(nom_deplacement,'deplacements','goToAjouter');},"css":{"cssText":submitCSS} } );
					closeDom(myDivModif,'Test');
 
				closeDom(myFieldset1,'Test');
			closeDom(myBigDiv,'Test');
 
		break;
 
		default:
 
		}
	}
Le fichier Interaction_BDD.js permet de traiter la valeur entrée (en l'occurrence ici on s'en fiche sauf l'alert situé dans getCmdPath qui sous FF nous renvoie bien le nom du formulaire et sous IE ne nous renvoie qu'une chaine vide) :
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
// Fonction d'insertion des données dans la base données --> AJOUTER
 
function sendForm(nData) {
	if(checkEmptyField(nData) == nData) {
		var url = getCmdPath('form',nData,1);
		var data = getCmdPath('form',nData,2);
		data = data + getDataFromField(nData,'full');
		if(document.getElementById('sender').value != '') {
			extraData = convertMS();
			data = data + extraData;
			data = data + '&MS=true';
			}
		else {
			data = data + '&MS=false';
			}
		//alert(data);
		var xhr = new Ajax.Request(url,{	asynchronous: true,
											method: 'post',
											postBody: data,
											onComplete: function(xhr,json) {
												//RTHC('ContentForm');
												var cible = json.BDD.cible;
												sendFormResponse(cible,json);
												}
											}
										);
 
		}
	else {
		return false;
		}
	}
 
 
 
 
 
// Fonction de vérification de la complétion des champs
 
function checkEmptyField(nFields) {
	var digit = 1;
	var ind = 0;
	fieldLastPriority = getPriorityFromField(nFields);
	fieldLastValue = getDataFromField(nFields,'value');
	for(i=0 ; i<nFields ; i++) {
		//alert('itération n° = ' + i);
		//alert('fieldLastValue['+i+']= ' + fieldLastValue[i]);
		//alert('fieldLastPriority['+i+'] = ' + fieldLastPriority[i]);
		if(fieldLastValue[i] == 'empty' || fieldLastValue[i] == ' t' || fieldLastValue[i] == ' t/essieu') {
			switch(fieldLastPriority[i]) {
				case 1:
					document.getElementById('txtHint' + digit).innerHTML = 'Ce champ est obligatoire !';
					ind = ind + 0;
					break;
 
				case 2:
					ind++;
					break;
 
				default:
				}
			}
		else {
			ind++;
			}
		digit++;
		}
	//alert('ind =' + ind + ' et doit être égal à 2 pour insérer dans la base !');
	return ind;
	}
 
 
 
// Fonction de vérification de l'importance des champs
 
function getPriorityFromField(nFields) {
	fieldNamePFF = getDataFromField(nFields,'name');
	var test = new Array(nFields);
	for(i=0 ; i<nFields ; i++) {
		if(fieldNamePFF[i].charAt(fieldNamePFF[i].lastIndexOf('_') + 1) == '1') {
			test[i] = 1;
			}
		else if(fieldNamePFF[i].charAt(fieldNamePFF[i].lastIndexOf('_') + 1) == '2') {
			test[i] = 2;
			}
		}
	return test;
	}
 
 
// Fonction de récupération des données
 
function getDataFromField(nFields,str) {
	var digit = 0;
	var data = "";
	var strname = "";
	fieldValueDFF = new Array(nFields);
	fieldNameDFF = new Array(nFields);
	switch(str) {
		case 'full':
			for(i=0 ; i<nFields ; i++) {
				digit = i + 1;
				fieldValueDFF[i] = document.getElementById('Field' + digit).value;
				strname = document.getElementById('Field' + digit).name;
				fieldNameDFF[i] = strname.substring(0,strname.lastIndexOf('_'));
				if(i < nFields-1) {
					data = data + 'Field' + digit + "=" + fieldNameDFF[i] + "&";
					data = data + fieldNameDFF[i] + "=" + fieldValueDFF[i] + "&";
					}
				else {
					data = data + 'Field' + digit + "=" + fieldNameDFF[i] + "&";
					data = data + fieldNameDFF[i] + "=" + fieldValueDFF[i];
				}
			}
			return data;
			break;
 
		case 'value':
			for(i=0 ; i<nFields ; i++) {
				digit = i + 1;
				var elem = document.getElementById('Field' + digit).value;
				if(elem.length == 0) {
					fieldValueDFF[i] = 'empty';
					}
				else {
					fieldValueDFF[i] = elem;
					}
				}	
			return fieldValueDFF;
			break;
 
		case 'name':
			for(i=0 ; i<nFields ; i++) {
				digit = i + 1;
				fieldNameDFF[i] = document.getElementById('Field' + digit).name;
			}
			return fieldNameDFF;
			break;
 
		default:
		}
	//return data;
	}
 
 
// Fonction d'obtention de l'url du fichier auquel la requête est envoyée
 
function getCmdPath(str,nFields,ind) {
	var formName = document.getElementById(str).name;
	alert('dans getCmdPath = ' + formName);
	var pos1 = formName.indexOf('_');
	var pos2 = formName.lastIndexOf('_');
	var pos3 = formName.length;
	var text_switch = '';
	switch(ind) {
	 	case 1:
			marker = formName.substring(pos1+1,pos2);
			text_switch = 'actionBDD_' + marker + '.php';
			//alert('ouverture du fichier : ' + text_switch);
 
			return text_switch;
			break;
 
		case 2:
			marker = formName.substring(pos2+1,pos3);
			text_switch = text_switch + 'table=' + marker + 's&';
			text_switch = text_switch + 'nFields=' + nFields + '&';
 
			return text_switch;
			break;
 
		default:
		}
	}
Le fichier PHP renvoyant la donné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
<?php
        
        $table = $_POST["table"];
        $field = "Field1";
        $column[1] = $_POST[$field];
        $data[1] = $_POST[$column[1]];
 
        $cible = 'deplacement';
        header('Content-Type: text/html; charset: UTF-8');                                              
        $sender = array ('cible'=>$cible, 'nom_deplacement'=>utf8_encode($data[1]));
        $sender = json_encode($sender);
        $sender = '{"BDD":' . $sender . '}';
        header('X-JSON: ' . $sender);
                
?>
Alors l'erreur renvoyée par IE6 est 1 objet attendu...

Merci d'avance pour votre aide...