[AJAX] Select lié [IE : NON / FF : OK]

**Kenshin86** · 11/02/2010, 23h20

Bonjour,

Je me suis inspiré de ce sujet :
http://www.developpez.net/forums/d80...nds-ne-marche/

Envoyé par Jeol2007

Bien, Bien Bien

Ca marche tres bien.

Mais il y a une chose:

- Il y a un bug avec internet explorer, quand je choisi un livre, le prix ne change pas tandis que ca fonctionne sur firefox.

Merci a toi bovino!

Edit:Il n'y a qu'un seul probleme et ce n'est qu'avec internet explore

J'ai exactement le même problème.

Je n'arrive pas à afficher ma dernière liste "dynamiquement".

A Noter que cela fonctionne correctement avec Firefox... Ça doit être une petite instruction à rajouter pour IE

Voici mon code 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
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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebatiment').innerHTML = leselect; 
			document.getElementById('lebatiment').onchange = gobatiment;
			gobatiment();
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBatiment.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('corps_de_metier'); 
	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
	xhr.send("id_corpsdemetier="+idcorpsdemetier); 
} 
 
function gobatiment()
{ 
	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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lenumeroetage').innerHTML = leselect; 
			document.getElementById('lenumeroetage').onchange = gonumeroetage;
			gonumeroetage();
 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxNumetage.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('batiment'); 
	idbatiment = sel.options[sel.selectedIndex].value; 
	xhr.send("id_batiment="+idbatiment); 
} 
 
function gonumeroetage()
{ 
	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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebureau').innerHTML = leselect;		
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBureau.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('numero_etage'); 
	sel1 = document.getElementById('batiment'); 
	idnumeroetage = sel.options[sel.selectedIndex].value;
	idbatiment = sel1.options[sel1.selectedIndex].value;
	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment); 
}

**hornetbzz** · 12/02/2010, 01h51

Salut,

Pas certain que cela soit la cause mais IE et FF ne gèrent pas les évènements de la même façon, or tu utilises une syntaxe unique :

Code :

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

document.getElementById('lebatiment').onchange = gobatiment;

Tu peux peut-être essayer comme ça pour affecter tes évenements:

Code :

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

1
2
3
var mon_id= document.getElementById('lebatiment');
if(document.all) mon_id.attachEvent("onchange",  gobatiment);
else mon_id.addEventListener("change",  gobatiment, true);

en reproduisant le même principe pour les autres évènements.

**E.Bzz** · 12/02/2010, 10h50

Bonjour,
@hornett > la 1° version ne devrait pas poser de problème.

@Kenshin86 > Vérifie que tu n'as un name d'un élément qui correspond à l'id d'un autre élément.
Ce genre de chose chagrine IE (mais pas FF)

EDIT : sinon, si on pouvait voir la partie HTML correspondante (le HTML généré, pas de PHP), ça aiderait

A+

**Kenshin86** · 12/02/2010, 15h09

Le code HTML 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
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
<form method="post" action="index.php?page=saisie_intervention_2"> 
	<fieldset> 
		<legend>&nbsp Saisie intervention &nbsp </legend> 
		<table class="center_bloc">
			<tr>
				<td>Corps de Metier</td>
				<td>
					<?php 
                                        $sql="SELECT id_cdm,designation_cdm FROM corps_de_metier";
                                        $req= mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
                                        ?>
					<select name='corps_de_metier' id='corps_de_metier' onchange='go()'> 
						<option value='-1'>Choisir un corps de métier</option> 
						<?php 
                                                $res = mysql_query("SELECT id_cdm,designation_cdm FROM corps_de_metier"); 
                                                while($row = mysql_fetch_assoc($res))
                                                { 
                                                        echo "<option value='".$row["id_cdm"]."'>".$row["designation_cdm"]."</option>"; 
                                                } 
                                                ?> 
					</select>	
				</td>
 
			</tr>
			<tr>
				<td>Batiment</td>
				<td>
					<div id='lebatiment' style='display:inline'> 
					<select name='batiment' id='batiment'> 
						<option value='-1'>Choisir un batiment</option> 
					</select> 
					</div> 
				</td>
			</tr>
			<tr>
				<td>Numéro Etage</td>
				<td>
					<div id='lenumeroetage' style='display:inline'> 
					<select name='numero_etage' id='numero_etage'> 
						<option value='-1'>Choisir un n° d'étage</option> 
					</select> 
					</div>
				</td>
			</tr>
			<tr>
				<td>Bureau</td>
				<td>
					<div id='lebureau' style='display:inline'> 
					<select name='bureau' id='bureau'> 
						<option value='-1'>Choisir un bureau</option> 
					</select> 
				</td>
			</tr>
		</table>
		<br />
		<td><input type="submit" value="Envoyez"></td>
	</fieldset> 
</form>

**Kenshin86** · 12/02/2010, 15h23

Envoyé par hornetbzz

Salut,

Pas certain que cela soit la cause mais IE et FF ne gèrent pas les évènements de la même façon, or tu utilises une syntaxe unique :

Code :

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

document.getElementById('lebatiment').onchange = gobatiment;

Tu peux peut-être essayer comme ça pour affecter tes évenements:

Code :

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

1
2
3
var mon_id= document.getElementById('lebatiment');
if(document.all) mon_id.attachEvent("onchange",  gobatiment);
else mon_id.addEventListener("change",  gobatiment, true);

en reproduisant le même principe pour les autres évènements.

J'ai essayé le code ci-dessous en suivant tes conseils, le même problème se produit :

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
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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebatiment').innerHTML = leselect; 
			var mon_id= document.getElementById('lebatiment');
			if(document.all) mon_id.attachEvent("onchange",  gobatiment);
			else mon_id.addEventListener("change",  gobatiment, true);		
 
 
 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBatiment.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('corps_de_metier'); 
	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
	xhr.send("id_corpsdemetier="+idcorpsdemetier); 
} 
 
function gobatiment()
{ 
	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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lenumeroetage').innerHTML = leselect; 
			var mon_id1= document.getElementById('lenumeroetage');
			if(document.all) mon_id1.attachEvent("onchange",  gonumeroetage);
			else mon_id1.addEventListener("change",  gonumeroetage, true);	
 
 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxNumetage.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('batiment'); 
	idbatiment = sel.options[sel.selectedIndex].value; 
	xhr.send("id_batiment="+idbatiment); 
} 
 
function gonumeroetage()
{ 
	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)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebureau').innerHTML = leselect;
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBureau.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
 
	sel = document.getElementById('numero_etage'); 
	sel1 = document.getElementById('batiment'); 
	sel2 = document.getElementById('bureau'); 
	idnumeroetage = sel.options[sel.selectedIndex].value;
	idbatiment = sel1.options[sel1.selectedIndex].value;
	idbureau = sel2.options[sel2.selectedIndex].value;
	//xhr.send("id_numeroetage="+idnumeroetage); 
	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment+"&id_bureau="+idbureau); 
 
}

**E.Bzz** · 12/02/2010, 16h00

Arf !

Il manque le </div> de "le_bureau"

A+

**Kenshin86** · 12/02/2010, 16h12

Donc alors, j'ai réessayé en rajoutant le </div> que j'avais oublié et j'ai toujours le même problème

A la sélection du numéro de l'étage, j'ai pas l'affichage du bureau dans la liste.

Cela fonctionne qu'avec Firefox !

J'ai le problème avec IE,Opéra et même Chrome

**E.Bzz** · 12/02/2010, 16h22

Envoyé par Kenshin86

Cela fonctionne qu'avec Firefox !

J'ai le problème avec IE,Opéra et même Chrome

Pour cette liste, que te renvoie Ajax ?
(il suffit de saisir dans la barre d'adresse du nav l'url appelée par Ajax, avec ses paramètres, puis de récupérer le code source de la page)

Sinon, pas d'erreur Javascript ?

A+

**hornetbzz** · 12/02/2010, 16h38

Euh je rêve ou bien ne faudrait-il pas attacher un évènement également sur ta dernière liste "bureau" ... ?

[AJAX] Select lié [IE : NON / FF : OK]

AJAX

Vue hybride

Discussions similaires

Partager

Partager