[AJAX] Exécution sous Internet Explorer (liste déroulantes liées)
Bonjour à tous,:salut:
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:
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égorie :
<select name="type" id='type' onchange='go()'>
<option value="-1">- - - Choisissez une caté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égorie- -</option>
</select>
<div id='categorie' style='display:inline'>
</div>
</form>
</body>
</html> |
Fichier ajaxCat.php :
Code:
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é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é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:
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.
