[AJAX] Listes liées qui ne fonctionnent pas sous IE8

Version imprimable

25/03/2011, 09h48
socaw

[AJAX] Listes liées qui ne fonctionnent pas sous IE8

Bonjour,

J'utilise ce script avec deux listes déroulantes. Il fonctionne parfaitement avec Firefox (3.6) et Opera 11.0 mais pas sous IE 8.
Y a-t-il une modification à apporter dans la définition de la fonction getXhr()?
25/03/2011, 10h16
andry.aime

Bonjour,

Montre nous ton code.

A+.
25/03/2011, 13h39
Bovino

Citation:

Envoyé par socaw

J'utilise ce script avec deux listes déroulantes. Il fonctionne parfaitement avec Firefox (3.6) et Opera 11.0 mais pas sous IE 8.
Y a-t-il une modification à apporter dans la définition de la fonction getXhr()?

Voici la réponse. :aie:

Plus sérieusement, quel script ???

oups... je pensais ajouter une réponse à ce message !

Il s'agit donc du script suivant :

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
 
<script type="text/javascript">
<!--
var xhr = null; 
 
function getXhr() {
	if (window.XMLHttpRequest) {// Firefox et autres
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) { // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	}
}
 
/* Méthode qui sera appelée sur le click du bouton */
function go(){
	getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if (xhr.readyState == 4 && xhr.status == 200) {
		leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('a_choisir').innerHTML = leselect;
		document.getElementById('comparateur_a_choisir').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_trieur.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('trieur');
	idtrieur = sel.options[sel.selectedIndex].value;
	xhr.send("idTrieur="+idtrieur);
}
// -->
</script>

Re,
Ne déclare pas xhr en globale et met "var" en déclarant les variables.

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
function getXhr() {
	var xhr = null; 
	if (window.XMLHttpRequest) {// Firefox et autres
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) { // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	}
	return xhr;
}
 
/* Méthode qui sera appelée sur le click du bouton */
function go(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if (xhr.readyState == 4 && xhr.status == 200) {
		var leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('a_choisir').innerHTML = leselect;
		document.getElementById('comparateur_a_choisir').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_trieur.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	var sel = document.getElementById('trieur');
	var idtrieur = sel.options[sel.selectedIndex].value;
	xhr.send("idTrieur="+idtrieur);
}
// -->

Sinon, montre nous ton code HTML.

A+.

Citation:

Envoyé par andry.aime

Re,
Ne déclare pas xhr en globale et met "var" en déclarant les variables.

Cette solution ne fonctionne pas sous IE 8 et ne fonctionne plus sous FF.

Voilà mon code 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Test ajax</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="mef" href="test.css" />
	</head>
 
	<script type="text/javascript">
	<!--
		var xhr = null;
	function getXhr() {
 
		if (window.XMLHttpRequest) {// Firefox et autres
			xhr = new XMLHttpRequest();
		}
		else if (window.ActiveXObject) { // Internet Explorer 
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		}
	}
 
	/* Méthode qui sera appelée sur le click du bouton */
	function go(){
		//var xhr = getXhr();
		getXhr();
		// On défini ce qu'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if (xhr.readyState == 4 && xhr.status == 200) {
			var leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('a_choisir').innerHTML = leselect;
			document.getElementById('comparateur_a_choisir').innerHTML = leselect;
			}
		}
		// Ici on va voir comment faire du post
		xhr.open("POST","ajax_trieur.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		var sel = document.getElementById('trieur');
		var idtrieur = sel.options[sel.selectedIndex].value;
		xhr.send("idTrieur="+idtrieur);
	}
	// -->
	</script>
 
	<script type="text/javascript">
	<!--
	function affiche_choix() {
		var code_choisi = document.getElementById('a_choisir').options[document.getElementById('a_choisir').selectedIndex].text;
		document.getElementById('choix').value = code_choisi;
	}
	// -->
	</script>
 
<body onload="go();">
 
<!-- en tete -->
<?php include("header_test.php");?>
 
<!-- menu -->
<?php include("menu_test.php");?>
 
<!-- corps -->
<div id="corps">
	<form method="post" action="traitement.php">
		<!--	CODES -->
		<fieldset><legend>Rubriques</legend>
			<div id="box0">
				<h4>Trieur de liste</h4>
				<select id="trieur" size="7" onchange="go();">
					<option value="tous" selected="selected">Tous les codes</option>
					<option value="6">Codes 6</option>
					<option value="4">Codes 4</option>
					<option value="3">Codes 3</option>
					<option value="2">Codes 2</option>
					<option value="1">Codes 1</option>
					<option value="gp">Groupes</option>
				</select>
			</div>
			<div id="box1">
				<h4>Rubrique à choisir</h4>
					<select id="a_choisir" name="a_choisir" size="8" onclick="affiche_choix();">
						<!-- rempli par ajax -->
					</select>
			</div>
			<div id="box2">
				<h4>Rubrique choisie</h4>
				<p><input type="text" id="choix" name="choix" readonly="readonly" /></p>
			</div>
		</fieldset>
		<!-- CRITERES	-->
		<fieldset><legend>Critères</legend>
			<div id="box5">
				<h4>Années</h4>
					<select id="liste_annees" name="annees" size="5">
						<?php
						// connection
							try
							{
								$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
							}
							catch (Exception $e)
							{
								die('Erreur : ' . $e->getMessage());
							}
						// REQUETE ANNEES
						$requeteAnnees = $bdd->query('SELECT Annee FROM depense GROUP BY Annee ORDER BY Annee DESC') or die(print_r($requeteAnnees->errorInfo()));
							while ($annees = $requeteAnnees->fetch()) {
								echo '<option value="'.$annees['Annee'].'">'.$annees['Annee'].'</option>';
							}
							$requeteAnnees->closeCursor();
						?>
					</select>
				<p><input type="submit" /></p>
			</div>
		</fieldset>
</form>
</div>
 
<!-- Pied de page-->
<?php include("pied_test.php");?>
 
</body>
</html>

28/03/2011, 12h06
andry.aime

Salut,

Citation:

<select id="a_choisir" name="a_choisir" size="8" onclick="affiche_choix();">

Un select ne supporte pas innerHTML chez IE, c'est avec le div conteneur que tu dois faire un innerHTML.

A+.
29/03/2011, 13h33
socaw

Citation:

Envoyé par andry.aime

Un select ne supporte pas innerHTML chez IE, c'est avec le div conteneur que tu dois faire un innerHTML.

J'ai effectué les modifs proposées, le JS fonctionne toujours sous FF mais toujours pas sous IE.
29/03/2011, 17h11
andry.aime

Montre nous le code html généré, le code php appelé par la requête AJAx et le code JS actuel.

A+.
06/04/2011, 17h13
socaw
Déso de reprendre le fil de la discussion si tard...

J'ai trouvé une solution :
1. Mettre le javascript dans un fichier externe et appeler ce fichier via la balise;<script>, la balise étant placée après la balise <body>;
  Code:
  
  1 2 3 4 <body onload="go();"> <script type="text/javascript" src="trieur.js"></script> ... </body>
2. Les variables du javascript ont été déclarées;
3. L'événement se produit sur une balise <div> et non plus sur une balise <select>.
Merci pour vos conseils et votre temps. :ccool: