Bonsoir à tous,

D'avance excusez moi de la longueur du code.

En local aucun problème, tous fonctionne bien sous IE et FF.

En ligne le problème vient de IE :

J'ai un formulaire avec cinq listes déroulantes qui s'affichent côte à côte avec des Div.

Le premier DIV s'affiche correctement mais les quatres autres DIV s'affichent avec une auteur différente.

Mon site

Source de la page principal [recherche.php]
Code PHP : 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
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<!-- <link href="banque_scl.css" rel="stylesheet" type="text/css"> -->
<script src="mesfonc.js" type="text/javascript"></script>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<style type="text/css">
<!--
 
#div_cpte
	{
	background-color: #FFFF99;
	color: #000000;
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	}
 
#div_mule
	{
	background-color: #FFFF99;
	color: #000000;
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	}
 
#div_type
	{
	background-color: #FFFF99;
	color: #000000;	
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	}
 
#div_cate
	{
	background-color: #FFFF99;
	color: #000000;
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	}
 
#div_obj
	{
	background-color: #FFFF99;
	color: #000000;	
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	}
-->
</style>
 
</head>
<body>
	<form name="frm_recherche" id="frm_recherche" style="width:850px">
		<fieldset>
			<legend><span class="Legende">[ Listes liées avec XMLHttpRequest ]</span></legend>
			<div id="div_cpte">
			<label>Compte</label>
			<select name="lst_cpte" id="lst_cpte" onchange="gomule(this.value)">
				<option value="-1">Compte</option>
					<?php
						$res = mysql_query("SELECT DISTINCT compte FROM t_inventaire_cpte");
						while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row['compte']."'>".$row['compte']."</option>";
						}
					?>
			</select>
			</div>
 
			<div id="div_mule">
			</div>
 
			<div id="div_type">
			</div>
 
			<div id="div_cate">
			</div>
 
			<div id="div_obj">
			</div>
		</fieldset>
	</form>
</body>
</html>
Mon fichier css [banque_scl.css]
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
 
.entete {
  	width: 100%;
  	position: absolute;
	width:80%;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;	
}
.colonneGauche {
	font-family: Geneva, Arial, Helvetica, sans-serif;
  	position: absolute;
	top: 150px;
	left: 1px;
	width: 108px;
	background-color:#990099;
	font-size:12px;
	font-weight:bold;
	color:white;	
}
 
body,td,th {
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;	
}
body {
	background-color: #404040;
}
a:link {
	color: #FFCC00;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFCC00;
}
a:hover {
	background: none;
	text-decoration: none;
	color: #FF0000;
}
a:active {
	text-decoration: none;
}
a {
	font-weight: bold;
}
.colonneDroite {
	color:#FFFFFF;
	background-color: #404040;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: absolute;
	top: 150px;
	width: 100%;
	margin-left: 80px;
	left: 35px;
	/*height: 75px;*/
}
 
.Style_Chp_Frm {
	background-color: #333333;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	font-size:8pt;
	border:thin solid #CCCCCC;
	text-indent: 5px;	
}
 
.Legende {
	color: #FF9900;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
}
 
.ContenuFrm {
 	font-weight:bold;
	color:#FFFFFF;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:14px;
	background-color:#990000;
}
 
.Bienvenue {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
}
 
/* Pour le Div des images*/
a.infobulle {
	position: relative;
	text-decoration: none;
}
 
a.infobulle span {
	display:none;
}
a.infobulle:hover span {
	display: inline;
	position: absolute;
	top: 0;
	left: 40px;
	background: #CCCCCC;
	text-align: center;
	color: white;
	padding: 10px 5px;
	width: 150px;
	border: 5px solid;
	border-color: #BB3E3E #790000 #790000 #BB3E3E;
}
 
.infobulle span img {
	display: block;
	margin: 0 auto;
}
img {
	border: none;
}
Le fichier qui traitre la liste des mules [ajaxmules.php]
Code PHP : 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
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
	header("Content-Type: text/html; charset=iso-8859-15");
	echo '<label>Mules</label>';
	echo '<select name="lst_mule" id="lst_mule" onchange="gotype(this.value)">';
	echo '<option value="-1">Mule</option>';
	if(isset($_POST["dcpte"]))
	{
		$res = mysql_query("SELECT DISTINCT mule FROM t_inventaire_cpte"
		 . " WHERE compte = '".utf8_decode($_POST["dcpte"])."' ORDER BY mule");
		while($row = mysql_fetch_assoc($res))
		{
			echo "<option value='".htmlentities($row["mule"])."'>".htmlentities($row["mule"])."</option>";
		}
	}
	echo '</select>';
?>
Le fichier qui traitre la liste des types[ajaxtypes.php]
Code PHP : 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
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
	header("Content-Type: text/html; charset=iso-8859-15");
	echo '<label>Type</label>';
	echo '<select name="lst_type" id="lst_type" onchange="gocategorie(this.value)">';
	echo '<option value="-1">Type</option>';
	if(isset($_POST["dcpte"]) && isset($_POST["dmule"]))
	{
		$res = mysql_query("SELECT DISTINCT type FROM t_inventaire_cpte"
	 	 . " WHERE 
		 compte = '".utf8_decode($_POST['dcpte'])."' AND 
		 mule= '".utf8_decode($_POST['dmule'])."' ORDER BY type");
 
		 while($row = mysql_fetch_assoc($res))
		 {
			echo "<option value='".htmlentities($row["type"])."'>".htmlentities($row["type"])."</option>";
		 }
	}
	echo '</select>';
?>
Le fichier qui traitre la liste des catégories[ajaxcategorie.php]
Code PHP : 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
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
	header("Content-Type: text/html; charset=iso-8859-15");
	echo '<label>Categorie</label>';
	echo '<select name="lst_cate" id="lst_cate" onchange="goobjet(this.value)">';
	echo '<option value="-1">Categorie</option>';	
	if(isset($_POST["ddcpte"]) && isset($_POST["ddmule"]) && isset($_POST["ddtype"]))
	{
		$res = mysql_query("SELECT DISTINCT categorie FROM t_inventaire_cpte"
	 	 	. " WHERE 
			compte = '".utf8_decode($_POST['ddcpte'])."' AND 
			mule = '".utf8_decode($_POST['ddmule'])."' AND 
			type= '".utf8_decode($_POST['ddtype'])."' ORDER BY categorie");
  		 while($row = mysql_fetch_assoc($res))
		 {
		echo "<option value='".htmlentities($row["categorie"])."'>".htmlentities($row["categorie"])."</option>";
		 }
	}
	echo '</select>';
?>
Le fichier qui traitre la liste des objets[ajaxobj.php]
Code PHP : 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
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
	header("Content-Type: text/html; charset=iso-8859-15");
	echo '<label>Objet</label>';
	echo '<select name="lst_obj" id="lst_obj">';
	echo '<option value="-1">Objet</option>';		
	if(isset($_POST["ddcpte"]) && isset($_POST["ddmule"]) && isset($_POST["ddtype"]) && isset($_POST["ddcate"]))
	{
		$res = mysql_query("SELECT DISTINCT objet FROM t_inventaire_cpte"
	 	 	. " WHERE 
			compte = '".utf8_decode($_POST['ddcpte'])."' AND 
			mule = '".utf8_decode($_POST['ddmule'])."' AND 
			type= '".utf8_decode($_POST['ddtype'])."' AND
			categorie = '".utf8_decode($_POST['ddcate'])."' ORDER BY objet");			
  		 while($row = mysql_fetch_assoc($res))
		 {
	echo "<option value='".htmlentities($row["objet"])."'>".htmlentities($row["objet"])."</option>";
		 }
	}
	echo '</select>';
?>
Le fichier de mes fonctions [mesfonc.js]
Code Javascript : 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
// Creation de l'objet XMLHttpRequest
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;
}
 
 
/* Gestion de la liste déroulante des mules */
function gomule(cpte)
{
	/* Cache les Div Mule, Type, Categorie et objet
	   si option sélectionnée dans la liste déroulante des comptes */	
	$idobjet('div_mule').innerHTML = '';
	$idobjet('div_type').innerHTML = '';
	$idobjet('div_cate').innerHTML = '';
	$idobjet('div_obj').innerHTML = '';		
 
	var xhrmule = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhrmule.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrmule.readyState == 4 && xhrmule.status == 200)
		{
			leselect = xhrmule.responseText;
			// Ajoute les options a la liste via lid du div
			$idobjet('div_mule').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhrmule.open("POST","ajaxmules.php",true);
	// ne pas oublier ça pour le post
	xhrmule.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments ici le compte via l'id du select
	var selcpte = $idobjet('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
	var data = "dcpte="+cptesel;
	xhrmule.send(data);
}
 
 
/* Gestion de la liste déroulante des types */
function gotype(typ)
{
	/* Cache les Div Type, Categorie et objet
	   si option sélectionnée dans la liste déroulante des mules */	
	$idobjet('div_type').innerHTML = '';
	$idobjet('div_cate').innerHTML = '';
	$idobjet('div_obj').innerHTML = '';				
 
	var xhrtype = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhrtype.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrtype.readyState == 4 && xhrtype.status == 200)
		{
			leselecttype = xhrtype.responseText;
			// Ajouter les options a la liste via l'id du div
			$idobjet('div_type').innerHTML = leselecttype;
		}
	}
 
	// Ici on va voir comment faire du post
	xhrtype.open("POST","ajaxtypes.php",true);
	// ne pas oublier ça pour le post
	xhrtype.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments le compte puis la mule via l'id du select
	var selcpte = $idobjet('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
 
	var selmule = $idobjet('lst_mule');
	var mulesel = selmule.options[selmule.selectedIndex].value;
 
	var datatype = "dcpte="+cptesel+"&dmule="+mulesel;
	xhrtype.send(datatype);
}
 
/* Gestion de la liste déroulante des categories */
function gocategorie(cate)
{
	/* Cache les Div Categorie et objet
	   si option sélectionnée dans la liste déroulante des types */	
	$idobjet('div_cate').innerHTML = '';
	$idobjet('div_obj').innerHTML = '';		
 
	var xhrcate = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhrcate.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrcate.readyState == 4 && xhrcate.status == 200)
		{
			leselectcate = xhrcate.responseText;
			// Ajouter les options a la liste via l'id du div
			$idobjet('div_cate').innerHTML = leselectcate;
		}
	}
 
	// Ici on va voir comment faire du post
	xhrcate.open("POST","ajaxcategorie.php",true);
	// ne pas oublier ça pour le post
	xhrcate.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments le compte puis la mule via l'id du select
	var selcpte = $idobjet('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
 
	var selmule = $idobjet('lst_mule');
	var mulesel = selmule.options[selmule.selectedIndex].value;
 
	var seltype = $idobjet('lst_type');
	var typesel = seltype.options[seltype.selectedIndex].value;
 
	var datacate = "ddcpte="+cptesel+"&ddmule="+mulesel+"&ddtype="+typesel;
	xhrcate.send(datacate);
}
 
/* Gestion de la liste déroulante des categories */
function goobjet(obj)
{
	/* Cache le Div objet
	   si option sélectionnée dans la liste déroulante des categories */		
	$idobjet('div_obj').innerHTML = '';
 
	var xhrobjet = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhrobjet.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrobjet.readyState == 4 && xhrobjet.status == 200)
		{
			leselectobj = xhrobjet.responseText;
			// Ajouter les options a la liste via l'id du div
			$idobjet('div_obj').innerHTML = leselectobj;
		}
	}			
	// Ici on va voir comment faire du post
	xhrobjet.open("POST","ajaxobj.php",true);
	// ne pas oublier ça pour le post
	xhrobjet.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments le compte puis la mule via l'id du select
	var selcpte = $idobjet('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
 
	var selmule = $idobjet('lst_mule');
	var mulesel = selmule.options[selmule.selectedIndex].value;
 
	var seltype = $idobjet('lst_type');
	var typesel = seltype.options[seltype.selectedIndex].value;
 
	var selcat = $idobjet('lst_cate');
	var catesel = selcat.options[selcat.selectedIndex].value;
 
	var dataobjet = "ddcpte="+cptesel+"&ddmule="+mulesel+"&ddtype="+typesel+"&ddcate="+catesel;
	xhrobjet.send(dataobjet);
}
 
/* Par faignantise de frapper du code merci à d-Rek */
function $idobjet(id)
{
	return document.getElementById(id);
}
Merci d'avance de votre aide.