[AJAX] Exécution sous Internet Explorer (liste déroulantes liées)

**dream_of_australia** · 07/06/2007, 09h44

Bonjour à tous,

Je débute en Ajax. J'ai lu l'excellent tuto de siddh qui explique les principes de base et je l'ai utilisé pour créer des listes liées de formulaire.

Voilà ce que fait mon code :

affichage d'une première liste déroulante catégories
selon la catégorie que l'utilisateur choisit, une seconde liste déroulante apparaît avec les sous-catégories
mais j'ai également ajouté dans la première liste l'option "Ajouter une nouvelle catégorie" qui affiche un formulaire contenant un champ texte (le nom de la nouvelle catégorie) et un bouton submit.

Sous Firefox, aucun problème. Par contre sous Internet Explorer, lorsque je clique sur Ajouter une nouvelle catégorie dans la liste, rien ne s'affiche et IE indique qu'il y a une erreur sous la page (à l'endroit où on récupère l'id). Je précise que les autres éléments de la liste font bien apparaître la deuxième liste déroulante.

Je vous mets ici mon code, dont la partie ajax est copiée du tuto de siddh et adaptée à mes variables :

Deux points que je précise : j'ai remplacé les identifiants de connexion à la base de données par ..., et les catégories sont en fait appelées des types et les sous-catégories des catégories. Ca peut prêter à confusion mais je dois travailler sur une base où c'est comme ça.

Fichier principal produits.php :

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
 
<?php  echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");  ?>
<!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-1" />
<title>AllBike Administration - Ajouter un nouveau produit</title>
<script type='text/javascript'>
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('categorie').innerHTML = leselect;
		}
	}
	xhr.open("POST","ajaxCat.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('type');
	idType = sel.options[sel.selectedIndex].value;
	xhr.send("idType="+idType);
}
</script>
</head>
 
<body>
<?php
include ("includes/produits.inc") ;
$listetypes = listeTypes() ;  // fonction définie dans produits.inc
$nt = count($listetypes) ;
?>
<form action="<?php echo $_SERVER['PHP_SELF'] ; ?>" method="post" id="chgcat">
	Cat&eacute;gorie :
	<select name="type" id='type' onchange='go()'>
      <option value="-1">- - - Choisissez une cat&eacute;gorie - - -</option>
    	<?php
        /* Construction de la première liste : on se sert du tableau PHP */
        for ($i = 0 ; $i < count($listetypes) ; $i++) {
        ?>
    	<option value="<?php echo $listetypes[$i][0] ; ?>"><?php echo $listetypes[$i][1] ; ?></option> 
	<?php }
         /* C'est cette option qui ne fonctionne pas sous IE */ ?>
	<option value="-2">- - Nouvelle cat&eacute;gorie- -</option>
	</select>
	<div id='categorie' style='display:inline'>
	</div>				
</form>
</body>
</html>

Fichier ajaxCat.php :

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
 
<?php
if(isset($_POST["idType"])){
	$idtype = $_POST["idType"] ;
	if ($idtype > 0) { /* On affiche les sous-catégories correspondantes */
		echo "Sous-cat&eacute;gorie : <select name='categorie'>";
		$id = mysql_connect("...", "...", "...") ;
		mysql_select_db("...") or die('La base de données n\'existe pas');
		$res = mysql_query("SELECT idcategorieproduit, categorieproduit FROM categorieproduit WHERE idtype='" . $idtype . "'") ; 
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["idcategorieproduit"]."'>".htmlentities($row["categorieproduit"])."</option>";
		}
		echo "</select>" ;
	}
	else if ($idtype == -2) { /* Ajout d'une nouvelle catégorie */
		echo "<form name='addType' method='post'><input type='text' size='100' maxsize='100'><input type='submit' name='newtype' value='Ajouter une nouvelle cat&eacute;gorie'></form>" ;
	}
}
?>

J'ai pensé que le problème venait peut-être de la valeur de l'$idtype négatif, mais j'ai essayé avec la valeur 100 et le problème ne s'est pas résolu.
L'erreur IE est sur la ligne suivante :

Code :

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

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

.

Est-ce que quelqu'un saurait d'où vient ce problème d'affichage ?

Je vous remercie d'avance pour votre aide. J'espère avoir posté ce message selon les règles du forum.

**E.Bzz** · 07/06/2007, 09h55

Bonjour,
que te retourne leselect (donc xhr.responseText), dans ce cas.
Fais un alert(xhr.responseText) à réception pour vérifier ...

A+

**dream_of_australia** · 07/06/2007, 10h11

Merci pour ta réponse super rapide ! J'ai mis un alert(xhr.responseText) et voici la réponse pour Ajouter une nouvelle catégorie :

Code :

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

1
2
 
<form name='addType' method='post'><input type='text' size='100' maxsize='100'><input type='submit' name='newtype' value='Ajouter une nouvelle cat&eacute;gorie'></form>

C'est bien ce qui devrait s'afficher non

**dream_of_australia** · 07/06/2007, 10h20

En cherchant un peu plus sur le net, j'ai trouvé un post dans lequel il était dit que c'était la balise <form> qui posait problème. J'ai essayé de faire comme c'était préconisé dans ce post, et en enlevant le 'f' (donc avec <orm>) on obtient bien un affichage correct sous IE, mais par contre cette fois c'est sous Firefox que ça plante.

**E.Bzz** · 07/06/2007, 10h29

Envoyé par dream_of_australia

J'ai essayé de faire comme c'était préconisé dans ce post, et en enlevant le 'f' (donc avec <orm>) on obtient bien un affichage correct sous IE, mais par contre cette fois c'est sous Firefox que ça plante.

Ce qui est plutôt normal ... et merci encore une fois à IE

Il va sûrement falloir que tu crées ton <form> via le DOM ...

**dream_of_australia** · 07/06/2007, 10h40

Merci de cette deuxième réponse. Ajax a l'air pas mal compliqué pour gérer les différents navigateurs.

Excuse-moi, question qui peut paraître bête mais je découvre tout ça, pour le moment je ne maîtrise que php/mysql et html alors... Pour le DOM il faut que je créé un nouveau document xml c'est bien ça ?

En attendant j'ai créé un formulaire vide dans ma page principale, que je remplis avec les input texte et submit seulement, et là ça fonctionne pour les deux navigateurs. Reste à tester si je peux récupérer correctement les valeurs de tous les formulaires. En effet, mon select pour les Sous-catégories est maintenant à l'intérieur de ce formulaire pour en Ajouter une...

Page principale :

Code :

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

1
2
3
4
5
6
 
<form name='addType' method='post' style='display:inline'>
<div id='categorie' style='display:inline'>
/* ici s'affiche soit la liste des sous-catégories soit le champ texte pour en ajouter une */
</div>
</form>

Code appelé :

Code :

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

1
2
3
4
 
else if ($idtype == -2) {
    echo "<input type='text' name='nvellecat' size='100' maxsize='100'><input type='submit' name='newtype' value='Ajouter une nouvelle cat&eacute;gorie'>" ;
}

Je vais tester et je posterais ce que je trouverais.

**E.Bzz** · 07/06/2007, 10h54

Envoyé par dream_of_australia

Merci de cette deuxième réponse. Ajax a l'air pas mal compliqué pour gérer les différents navigateurs.

En fait, c'est pas un pb Ajax, mais plutôt DHTML (HTML dynamique).
Et dû à l'utilisation de innerHTML (pas bien DOM, ça

) qui n'est pas pris en compte correctement dans la structure de la page (toujours au sens DOM).

Pour le DOM, c'est par là (toute la page t'intéressera)

A+

**dream_of_australia** · 07/06/2007, 14h35

Génial, merci pour le lien !

**dream_of_australia** · 08/06/2007, 07h24

J'ai réussi à tout faire fonctionner. Je mets donc ici ma solution, il en existe sûrement plein mais ça aidera peut-être un autre débutant comme moi. Je la trouve très simple à mettre en place.

J'ai fait un <div> contenant le formulaire d'ajout de nouvelle catégorie qui est invisible au départ (style="display:none;").
Lorsque l'utilisateur choisit un item dans la première liste déroulante, je teste dans la fonction javascript :

s'il s'agit d'un item classique, j'affiche la liste des sous-catégories correspondantes en appelant le xhr etc...
s'il s'agit d'un ajout de nouvelle catégorie, je rends le div visible.

Fonction appelée lorsqu'un item de la liste est sélectionné :

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
 
function go(){
	var t1 = document.getElementById('type') ;
	var t = t1.options[t1.selectedIndex].value;
	if (t == -2) { /* ajout d'une nouvelle catégorie*/
                /* on rend le div du formulaire d'ajout visible */
		document.getElementById('addtype').style.display = "block" ;
	}
	else { /* affichage d'une deuxième liste déroulante avec les sous-catégories correspondant à la catégorie choisie */
		var xhr = getXhr();
		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('categorie').innerHTML = leselect;
	   		}
		}
	   	 xhr.open("POST","ajaxCat.php",true);             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	  	sel = document.getElementById('type');
	  	idType = sel.options[sel.selectedIndex].value;
	  	xhr.send("idType="+idType);
	}
}

Voili voilou ! Et merci à E.Bzz !

[AJAX] Exécution sous Internet Explorer (liste déroulantes liées)

JavaScript

Discussions similaires

Partager

Partager