[AJAX] AJAX et IE, comment remplacer innerHTML?

**forumcpp_nono** · 13/04/2010, 18h00

bonjour,
je ne parviens pas à remplir une liste déroulante à partir d'une autre, sans recharger la page. Il paraît que c'est un classique avec AJAX, mais avec innerHTML qui ne fonctionne pas avec IE pour remplir les listes déroulantes, je n'y arrive vraiment pas! J'ai essayé d'utiliser les solutions proposées par Microsoft, mais rien y fait. voici une des utilisations qui ne marche pas :

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
 
<html>
<script language="javascript"/>
 
			function fnXhr(){
                                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;
			} //Fin fonction fnXhr()
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function remplirListe(){
				var xhr = fnXhr();
 
				xhr.onreadystatechange = function(){
 
					if(xhr.readyState == 4 && xhr.status == 200){
						liste2 = "<select>" + xhr.responseText;
 
								listeDestination.outerHTML = liste2 + "</select>";
					}
				} //Fin de l'action avec la réponse
 
 
				xhr.open("POST", "./ajax/class_clients.php",  true);
 
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				liste1 = document.getElementById('listeOrigine');
 
				id = liste1.options[liste1.selectedIndex].value;
				xhr.send("id=" + id);
			} //Fin fonction remplirListe()
</script/>
</head/> 
 
<?php 
include('./include/fonctions.inc.php'); 
?>
 
<body/>
 
<form name="accueil" id="accueil" method="post" action="connexion.php"/>
 
<?php
$conn = mysql_connect($host, $login, $mdp);
 
mysql_select_db($bd, $conn);
?>
 
<div class="div_niveau1">
<label>Niveau * : </label>
 
<select name="listeOrigine" id="listeOrigine" onchange="remplirListe()"/>
<option value=""/>Toutes</option/>
 
<?php
$req = "select * from matables ";
 
$ptr_req = mysql_query($req);
 
while($tableau = mysql_fetch_array($ptr_req)){
?>
 
<option value="<?php echo $tableau['ID_dans_matable'] ?>"/><?php echo $tableau['intitule_dans_matable'] ?></option>
 
<?php } 
mysql_close()
?>
</select/>
</div/>
 
<div class="div_niveau2"/>
<select name="listeDestination" id="listeDestination"/>
</select/>
</div/>
 
<div class="indexdivboutons">
<input type="submit" name="btnvalider" value="Valider">
 
<input type="reset" name="btnrecommencer" value="Recommencer">
</div/>
 
</form>
</body/>
</html>

Je vous remercie d'avance de votre aide!

Noël

**emmanuel.remy** · 13/04/2010, 23h19

Salut,

Déjà ton code est hyper-propriétaire IE. Les ids appelés directement sans passé par un document.getElementById sont du plus bel effet

Ensuite laisse tomber le outerHTML...

Si tu veux utiliser le innerHTML, crée une balise div (par exemple), nomme là divDestination et effectue:

Code :

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

document.getElementById("divDestination").innerHTML = ICI LE TEXTE COMPLET DU SELECT AVEC LES OPTIONS

. Ce devrait déjà être plus conforme.

ERE

[AJAX] AJAX et IE, comment remplacer innerHTML?

AJAX

Vue hybride

Discussions similaires

Partager

Partager