XMLHttpRequest fonctionne sous FireFox mais pas sous IE11

**Supernatural** · 27/02/2018, 16h03

Bonjour,

J'ai ce script qui fonctionne bien sous Firefox, mais pas sous IE11... Ma première cellule est bien alimentée mais la seconde reste toujours vide...
A t'on le doit de mettre du PHP dans du xmlhtttp

Code :

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

xmlhttp.open("GET","Ajaxloadcells.php?line="+ligne.options[ligne.selectedIndex].id+"&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>", true);

?

Merci par avance pour votre aide.

Ci-joint mon code

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
 
	<script type="text/javascript">
		function Loadcells(str) {
			var id=ligne.options[ligne.selectedIndex].id;
			//alert(id);
			if (str=="") {
				document.getElementById("cellule").innerHTML="";
				return;
			}
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				document.getElementById("cellule").innerHTML=this.responseText;
				}
			}
			//alert(str);
			xmlhttp.open("GET","Ajaxloadcells.php?line="+ligne.options[ligne.selectedIndex].id+"&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>", true);
			xmlhttp.send();
		}
	</script>

**psychadelic** · 27/02/2018, 17h01

comprend pas bien la question...

Oui, tu peux appeler un fichier php par une fonction XMLHttpRequest et lui mettre des arguments php qui sont générés en même temps que la page

mais pourquoi mettre un argument (str) dans ta fonction Loadcells(str)
alors qu'il ne sert à rien dans ton appel ajax ?

et si la finalité c'est juste de mettre du code html généré sur ton serveur pour le placer dans un élément de ta page html ,
pourquoi n'utilise tu pas tout simplement un fetch dans ce cas ??

**NoSmoking** · 27/02/2018, 19h48

Bonjour,
actuellement on peut initialiser simplement avec

Code :

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

var oXhr = window.XMLHttpRequest;

et écrire plus clairement la fonction avec onload, par exemple

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
function Loadcells(str) {
  var id = ligne.options[ligne.selectedIndex].id;
  if (str === "") {
    document.getElementById("cellule").innerHTML = "";
    return;
  }
  var oXhr = window.XMLHttpRequest;
  oXhr.onload = function () {
    document.getElementById("cellule").innerHTML = this.responseText;
  }
  oXhr.error = function (event) {
    console.log( event.message);
  }
 
  oXhr.open("GET", "Ajaxloadcells.php?line=" + id + "&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>", true);
  oXhr.send();
}

Par contre je ne saisie pas la notion de seconde cellule !?!

Peut être as tu un problème de cache avec IE ?

@psychadelic :
Attention fetch n'est pas supporté par IE.

**psychadelic** · 27/02/2018, 22h25

Envoyé par NoSmoking

Attention fetch n'est pas supporté par IE.

Oui, mais il y a un Polyfill
https://developer.mozilla.org/fr/doc...tch#Voir_aussi

**Supernatural** · 28/02/2018, 15h36

Bonjour,

merci pour vos réponse.

Une chose étonnante que je viens de voir, c'est que j'ai un autre script qui est constitué de la même sorte et lui fonctionne bien sous IE...

Petite précision, j'utilise plusieurs fois le xmlhttp dans la même page avec le script qui me pose soucis... ai-je le dois?

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
 
<script type="text/javascript">
		function Loadcells(str) {
			var id=ligne.options[ligne.selectedIndex].id;
			//alert(id);
			if (str=="") {
				document.getElementById("cellule").innerHTML="";
				return;
			}
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				document.getElementById("cellule").innerHTML=this.responseText;
				}
			}
 
			xmlhttp.open("GET","Ajaxloadcells.php?line="+ligne.options[ligne.selectedIndex].id+"&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>", true);
			xmlhttp.send();
		}
	</script> 
 
	<script type="text/javascript">
		function Loadlocation(str2) {
			var id2=cellule.options[cellule.selectedIndex].id;
			//alert(id);
			if (str2=="Sélectionner une cellule") {
				document.getElementById("location").innerHTML="";
				return;
			}
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				document.getElementById("location").innerHTML=this.responseText;
				}
			}
			//alert(str);
			xmlhttp.open("GET","ajaxloadlocationtool.php?idline="+ligne.options[ligne.selectedIndex].id+"&idcell="+cellule.options[cellule.selectedIndex].id+"&idtool=<?PHP echo $Tool?>", true);
			xmlhttp.send();
		}
	</script>

**psychadelic** · 28/02/2018, 16h41

oui, tu a le droit d'utiliser autant XMLHttpRequest que tu veux sur une même page , mais si tu leur donne à tous le même nom ça ne pourra pas bien marcher !

donne leur déjà des noms différents ça sera un meilleur départ...

xmlhttp_1 =new XMLHttpRequest();

xmlhttp_2 =new XMLHttpRequest();

**Supernatural** · 01/03/2018, 09h03

j'ai testé mais le résultat reste le même...

**psychadelic** · 01/03/2018, 14h36

tu peux faire voir ton code pour qu'on ouisse comprendre ?

t'a bien changé tous les xmlhttp. en xmlhttp_1. ou xmlhttp_2. suivant leurs fonctions respectives ???

J'ai un gros doute, la

**NoSmoking** · 01/03/2018, 14h44

Lorsque tu fais cette déclaration xmlhttp=new XMLHttpRequest() et en absence de mot clé var ta variable est définie comme globale, il y a effectivement des chances pour qu'il y ait collusion mais sachant que tes deux fonctions sont visiblement indépendantes le risque reste minime.

Pour un codage plus propre, et une non pollution de l'espace global, déclare, dans tes fonctions, ta variable comme suit

Code :

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

var xmlhttp=new XMLHttpRequest();

Nota: à voir tes fonctions cela pourrait être factorisé mais ceci est un autre problème.

Pourrais tu en dire plus sur ton dysfonctionnement.

**Supernatural** · 01/03/2018, 15h24

J'ai 3 SELECT.

Le premier est alimenté directement avec une requête MySQL, le second est alimenté en fonction du choix du premier et le troisième en fonction du second.

Sous Firefox tout est OK. Sous IE je n'ai que le premier SELECT qui est rempli, les autres reste vides...

Code de mon 1er SELECT:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			<div class="form-group">
				<label>Ligne:</label>
				<select class="form-control" style="width:auto" id="ligne" name="ligne" onchange="Loadcells(this.value)">
					<option value="line_default"></option>
						<?php
                                                $Query_line = "SELECT * FROM gmao.lines ORDER BY Lineshortname";
                                                mysqli_query($db, $Query_line) or die('Error querying database.');
                                                $Query_line = mysqli_query($db, $Query_line);
                                                while ($Row_line = mysqli_fetch_array($Query_line)) {
                                                        echo '<option ID="'.$Row_line['ID'].'">'.$Row_line['Lineshortname'].'</option>';}
                                                ?>	
				</Select>
			</div>

Mon second SELECT:

Code html :

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

1
2
3
4
			<div class="form-group">
				<label>Cellule:</label>
					<select class="form-control" style="width:auto" id="cellule" name="cellule" onchange="Loadlocation(this.value)"></select><br>					
			</div>

Mon troisième SELECT:

Code html :

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

1
2
3
4
		<div class="form-inline"><br />
			<label for="sel1">Emplacement sur le poste:</label>
				<select class="form-control" style="width:auto" id="location" name="location"></select>
		</div>

Code AJAX associé:

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
 
	<script type="text/javascript">
		function Loadcells(str) {
			var id=ligne.options[ligne.selectedIndex].id;
			//alert(id);
			if (str=="") {
				document.getElementById("cellule").innerHTML="";
				return;
			}
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				var xmlhttp_1=new XMLHttpRequest();
			} else { // code for IE6, IE5
				var xmlhttp_1=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp_1.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				document.getElementById("cellule").innerHTML=this.responseText;
				}
			}
 
			xmlhttp_1.open("GET","Ajaxloadcells.php?line="+ligne.options[ligne.selectedIndex].id+"&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>", true);
			xmlhttp_1.send();
		}
	</script> 
 
	<script type="text/javascript">
		function Loadlocation(str2) {
			var id2=cellule.options[cellule.selectedIndex].id;
			//alert(id);
			if (str2=="Sélectionner une cellule") {
				document.getElementById("location").innerHTML="";
				return;
			}
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				var xmlhttp_2=new XMLHttpRequest();
			} else { // code for IE6, IE5
				var xmlhttp_2=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp_2.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				document.getElementById("location").innerHTML=this.responseText;
				}
			}
			//alert(str);
			xmlhttp_2.open("GET","ajaxloadlocationtool.php?idline="+ligne.options[ligne.selectedIndex].id+"&idcell="+cellule.options[cellule.selectedIndex].id+"&idtool=<?PHP echo $Tool?>", true);
			xmlhttp_2.send();
		}
	</script>

**psychadelic** · 01/03/2018, 23h13

à priori, il n'y a rien qui cloche dans ton JavaScript, même si perso je n'aurais jamais codé ça de cette façon...

Il y a peut être un soucis pour avoir utiliser le mot location comme nom pour un ID, mais bon, ça doit passer quand même

idem pour les xmlhttp_1.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {

qui auraient pus être xmlhttp_1.onreadystatechange = function () {
if (xmlhttp_1.readyState == 4 && xmlhttp_1.status == 200) {

mais ça aussi c'est complètement secondaire.

en revanche la génération de code PHP me pose un soucis :

Code php :

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

1
2
while ($Row_line = mysqli_fetch_array($Query_line)) {
	echo '<option ID="'.$Row_line['ID'].'">'.$Row_line['Lineshortname'].'</option>';}

parce qu'il signifie qu'aucun élément n'a de value,

alors je me demande comment ça se passe pour tes 2 appels (Loadcells(this.value) et Loadlocation(this.value)) vu qu'il ny a aucune values

sinon les variables ligne et cellule semblent sortir d'un chapeau, même si je me doute un peu sur ce à quoi elles font référence, même si par la suite on retrouve des document.getElementById("cellule"). / "location") qui bizarement vont détruire les select....

et de mon souvenir, FireFox utilise le contenu de la balise option s'il n'y a pas de value indiqué, mais pas Internet Explorer.

Mais bon, j'ai quand même un doute aussi la dessus, le mieux serait encore de voir ce qui se passe dans le débogueur d'IE11;

reste que le fait d'utiliser de remplir les attributs value sur les select html serait tout de même une bonne chose à faire.

**Supernatural** · 02/03/2018, 08h52

Bonjour,

J'ai rajouté value dans mes option, modifié selon tes réponses et c'est toujours la même galère... Je ne comprends franchement pas pourquoi...

Je me trompe peut-être mais je pense que cela doit bloqué au niveau des xmlhttp.open() et xmlhttp.send() (cf. mes codes ci-dessus).

**NoSmoking** · 02/03/2018, 11h39

Ce qui serait intéressant c'est que tu mettes le code HTML généré, CTRL + U sur la plupart des navigateurs.

**psychadelic** · 02/03/2018, 15h01

Envoyé par Supernatural

Bonjour,

J'ai rajouté value dans mes option, modifié selon tes réponses et c'est toujours la même galère... Je ne comprends franchement pas pourquoi...

Je me trompe peut-être mais je pense que cela doit bloqué au niveau des xmlhttp.open() et xmlhttp.send() (cf. mes codes ci-dessus).

ben, c'est sur faudrait déjà savoir ce qu'il y a dans
"Ajaxloadcells.php?line=" + ligne.options[ligne.selectedIndex].id + "&idtool=<?PHP echo $Tool?>&idtooltype=<?PHP echo $id_tooltype?>"
et
"ajaxloadlocationtool.php?idline=" + ligne.options[ligne.selectedIndex].id + "&idcell=" + cellule.options[cellule.selectedIndex].id + "&idtool=<?PHP echo $Tool?>"

parce que d'ici c'est in-devinable...

ceci dit, je ne sais pas d'ou sort la base de ton code des XMLHttpRequest mais je me servirait plutot de ça : => https://developer.mozilla.org/en-US/...Simple_Example

avec pour base :

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>  double HTTP request </title>
</head>
<body>
 
	<div class="form-group">
		<label>Ligne:</label>
		<select class="form-control" style="width:auto" id="ligne" name="ligne" >
			<option id ="lx" value="lin_xxx" selected >ligne xxx </option>
			<option id ="la" value="lin_aaa"  >ligne aaa </option>
			<option id ="lb" value="lin_bbb"  >ligne bbb </option>
			<option id ="lc" value="lin_ccc"  >ligne ccc </option>
			<option id ="ld" value="lin_ddd"  >ligne ddd </option>
			<option id ="le" value="lin_eee"  >ligne eee </option>
		</Select>
	</div>
 
 
	<div class="form-group">
		<label>Cellule:</label>
		<select class="form-control" style="width:auto" id="cellule" name="cellule" >
			<option id ="cx" value="cel_xxx" selected >cellule xxx </option>
			<option id ="ca" value="cel_aaa"  >cellule aaa </option>
			<option id ="cb" value="cel_bbb"  >cellule bbb </option>
			<option id ="cc" value="cel_ccc"  >cellule ccc </option>
			<option id ="cd" value="cel_ddd"  >cellule ddd </option>
			<option id ="ce" value="cel_eee"  >cellule eee </option>
			<option id ="cf" value="cel_fff"  >cellule fff </option>
		</select><br>					
	</div>
 
	<div class="form-inline"><br />
		<label for="sel1">Emplacement sur le poste:</label>
			<select class="form-control" style="width:auto" id="location" name="location"></select>
	</div>
 
 
	<script  type="text/javascript">
 
                var
                        list_ligne    = document.getElementById('ligne'),
                        list_cellule  = document.getElementById('cellule'),
                        list_location = document.getElementById('location')
                ;
 
                function f_changement_ligne(e) {
                        console.log(this.value);
                        console.log(this.selectedIndex);
                        console.log(this.options[this.selectedIndex].id);
                }
 
                function f_changement_cellule(e) {
                        console.log(this.value);
                        console.log(this.selectedIndex);
                        console.log(this.options[this.selectedIndex].id);
                }
 
                list_ligne.addEventListener('change', f_changement_ligne, false);
                list_cellule.addEventListener('change', f_changement_cellule, false);
 
        </script>
</body>
</html>

**Supernatural** · 02/03/2018, 16h04

La base de mon code sort d'ici: https://www.w3schools.com/php/php_ajax_database.asp

**psychadelic** · 02/03/2018, 16h52

Ben , c'est plutôt malheureux de donner de tels exemples de code....

**psychadelic** · 02/03/2018, 23h43

bon visiblement l'implémentation de XMLHttpRequest sous IE11 à des soucis => https://caniuse.com/#search=XMLHttpRequest

Cad que cette fonctionnalité existe bien sous IE 11 mais que visiblement elle à du mal à gérer un " double emploi ".

Donc, à moins de factoriser ton code AJAX, je ne vois pas de solution possible,
et ça m'étonnerai que tu puisse te rabattre sur l'ancienne activeX utilisée sous IE 6 , 5 , 4...
car visiblement ce n'est plus implémenté sur les Windows >= 7.. (?)

**Supernatural** · 05/03/2018, 09h01

"Donc, à moins de factoriser ton code AJAX" -> C'est à dire?

Je veux bien un exemple car je vois pas comment on peut faire...

**psychadelic** · 05/03/2018, 13h42

ben tu fait une seule fonction dans lequel tu met ton unique code Ajax, mais dont les arguments d'appels permettent de savoir laquelle de tes 2 listes est à traiter...

le mot factoriser viens des maths, quand tu a une équation = (a x b) + (a x c), tu peux mettre en facteur " a " soit = a x ( b+ c ) parce que " a " est commun au 2 parties de l'équation.
Ici ce qui est commun à tes 2 traitements c'est un appel Ajax...

**NoSmoking** · 05/03/2018, 14h13

Revenons un peu en arrière

mais pas sous IE11... Ma première cellule est bien alimentée mais la seconde reste toujours vide...

Si IE11 plante uniquement sur le 2^éme appel :
• est-ce que tu as essayé de lancer c 2^éme appel directement en mettant une valeur en dur dans ton code.
• Ne pas oublier de vérifier le code HTML généré, CTRL + U sur la plupart des navigateurs, comme demandé précédemment.

XMLHttpRequest fonctionne sous FireFox mais pas sous IE11

AJAX

Discussions similaires

Partager

Partager