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

**unapologetic** · 27/02/2013, 09h32

Bonjour à tous,

J'ai suivit cette discussion sauf que mon problème n'est pas résolu.

En fait comme le titre l'indique, j'ai une liste déroulante qui est liée via deux fonctions (Ajax/JavaScript) à un input et une autre liste.
Étonnement il n'y a que la seconde liste qui ne fonctionne pas. Alors que l'input, lui, fonctionne bien.
Mon code Javascript 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//Cette fonction est appelée via "<script type="text/javascript" src="../JavaScript/javascript.js"></script>"
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;
	}
//les fonctions suivantes sont directement sur la feuille PHP
function serv() //Ceci est la fonction qui fonctionne très bien (input)
{
	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('service').innerHTML = leselect;
	}
}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","../Ajax/ajaxService.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 la TMA
	sel = document.getElementById('tma');
	idtma = sel.options[sel.selectedIndex].value;
	xhr.send("idtma="+idtma);
	}
 
	function sa() //Ceci est la fonction qui ne marche pas (liste déroulante)
	{
	       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('sous_appli').innerHTML = leselect;
		}
	}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","../Ajax/ajaxApplication.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 la TMA
		sel = document.getElementById('tma');
		idtma = sel.options[sel.selectedIndex].value;
		xhr.send("idtma="+idtma);
	}

Voila maintenant mon code PHP de la première liste déroulante

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
echo"<tr>
			<td valign='top'>
				<label>Nom de la TMA*</label>
			</td>
			<td><div onClick = 'sa();serv();' >
				<select name     = 'tma' 
						id       = 'tma' 
						style    = 'width:313px;float:left;' 
						REQUIRED>
 
				<option value=''> </option>";
 
				//Récupère la liste des tma
				$liste_tma = mysql_query("SELECT * FROM tma")or die ('Erreur SQL !<br>'.$res.'<br>'.mysql_error());
				while($row = mysql_fetch_assoc($liste_tma))
				{										
					echo "<option value='".$row["id_tma"]."'>".$row["libelle_tma"]." </option>";
				}				
echo"				</select> </div>
			</td>
		</tr>";

Voila merci d'avance de votre aide

**andry.aime** · 27/02/2013, 10h21

Bonjour,

C'est dans le onchange du select que tu devais appeler les fonctions mais pas dans le onclick du div.
Montre nous le code HTML généré de la page (avec les div à mettre à jour aussi) mais pas le code PHP.

A+.

**unapologetic** · 27/02/2013, 10h46

Bonjour,

C'est dans le onchange du select que tu devais appeler les fonctions mais pas dans le onclick du div.

oui c'est ce que j'avais fait avant, mais dans la discussion que j'ai mis en lien ils disent que de mettre l'enevement dans le div aurait été une solution. Donc j'ai changé. Mais qu'importe l'appel de fonction ça ne marche pas

Et voila le code généré
(PS : TMA représente la première liste, Application concernée représente la seconde liste)

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
function serv()
{
	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('service').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","../Ajax/ajaxService.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 la TMA
	sel = document.getElementById('tma');
	idtma = sel.options[sel.selectedIndex].value;
	xhr.send("idtma="+idtma);
}
 
function sa()
{
         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('sous_appli').innerHTML = leselect;
	}
}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","../Ajax/ajaxApplication.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 la TMA
	sel = document.getElementById('tma');
	idtma = sel.options[sel.selectedIndex].value;
	xhr.send("idtma="+idtma);
}
 
 
	function donnees(f)
	{
		//Fonction donnees() qui fonctionne également, dans un soucis de clarté je l'ai enlevé du code
	}
	</script>
<tr>
	<td valign='top'>
		<label>Nom de la TMA*</label>
	</td>
	<td>
		<select name     = 'tma' 
		              id       = 'tma' 
			     style    = 'width:313px;float:left;' 
			     onClick = 'sa();serv();donnees(this.form);' REQUIRED>
 
			<option value=''> </option>
                        <option value='1'>TMA Virement </option>
                        <option value='2'>TMA Prelevement </option>
                        <option value='3'>TMA PDE </option>
                        <option value='4'>TMA NOYEC </option>
                        <option value='5'>TMA Produit Packagé </option>
                        <option value='6'>TMA SAV Canaux </option>
                        <option value='7'>TMA Artemis </option>
                        <option value='8'>TMA CDC </option>
                        <option value='9'>TMA DOC </option>
                        <option value='10'>TMA TREF </option>				                       </select> 
	</td>
</tr>
<tr>
	<td>
		<label>Application concernée* </label>
	</td>
	<td>
                <select name     = 'sous_appli' 
			      id       = 'sous_appli'
			     style    = 'width:313px;' 
			  onChange = 'donnees(this.form);'>
		<option value=''>Choisir une TMA</option>
		</select>
	</td>
 </tr>

**andry.aime** · 27/02/2013, 10h54

Code :

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

document.getElementById('sous_appli').innerHTML = leselect;

Code html :

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

1
2
3
4
<select name     = 'sous_appli' 
			      id       = 'sous_appli'
			     style    = 'width:313px;' 
			  onChange = 'donnees(this.form);'>

Un select ne suporte pas innerHTML sous IE. C'est le td conteneur que tu dois mettre à jour.

A+.

**unapologetic** · 27/02/2013, 11h04

Ah merci beaucoup !
Ça m'a permis de régler un autre petit soucis du coup

Merci encore,
Bonne journée !

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

AJAX

Discussions similaires

Partager

Partager