Erreur de code avec Ajax

**sadkat** · 13/02/2008, 09h52

coucou, j'ai essayé d'utiliser le code proposé sur ce forum pour faire des liste liées entre elles avec Ajax, mais il y a un bug sur firefox (bon le code ne fonctionne pas encore mais je ne crois pas que ce problème soit lié).

Bon en faite ce qui se passe c'est que sous firefox quand je sélectionne qqch dans la première liste la deuxième se change en une double liste, à savoir un champ avec une petite flèche (liste normale) mais quand je clique dessus j'ai un autre champ imbriqué dans le premier.

Je sais pas trop si c'est clair, si besoin je vous envoi mon code.

Est ce que c'est normal ? ou bien est ce que le code du tutoriel est censé prendre en compte les deux browers ?

une astuce peut etre ?

**le_chomeur** · 13/02/2008, 10h19

Salut

De quel code du forum parles tu ? celui de la faq ou un autre ?
et oui ton code serait le bienvenue

**sadkat** · 13/02/2008, 10h28

je parle de ce code là : http://siddh.developpez.com/articles/ajax/#LIV-A

et le mien (il change tout le temps) c'est :
première page :

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
<?php
include("_session.php");
if(!$editDev)
	exit("Forbidden!");
if(!$userId)
{
	header("Location: login.php");
	exit();
}
$CurrentPage="admin";
$db=Db_ConnectToProduct("vhd");
 
$ReqNbMod="SELECT count( DISTINCT `moId` ) as nbmod FROM `Model` ";
$ResNbMod=Db_Query($ReqNbMod,$db);
$maxMod = Db_GetArray($ResNbMod);
 
// JE RECHERCHE LES MODELES DISPONIBLES
// $query="SELECT moId,moName FROM Model ORDER BY moName ASC";
// $req=Db_Query($query,$db);
// while($row=Db_GetArray($req))
// {
	// $selected=($row["moId"]==$moId)?" selected=\"selected\"":"";
	// $selectModel.="<option value=\"".$row["moId"]."\"".$selected.">".$row["moName"]."</option>\n";
// }
 
 
$query="SELECT mseId,mseName FROM ModelSet "; 
$query .= " WHERE msemoId  = " .print $row["moId"] ;
$query .= " ORDER BY mseName ASC ;" ;
$req=Db_Query($query,$db);
echo $query;
while($row=Db_GetArray($req))
{
	$selected=($row["mseId"]==$mseId)?" selected=\"selected\"":"";
	$selectSet.="<option value=\"".$row["mseId"]."\"".$selected.">".$row["mseName"]."</option>\n";
}
 
?>
 
<html>
<head>
	<title>validation croisée </title> 
<SCRIPT language="JavaScript" 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('idmseId').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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('idmoId');
				idmoId = sel.options[sel.selectedIndex].value;
				xhr.send("moId="+idmoId);
			}
 
 
</SCRIPT>
</head>
 
<body>
<form  name = "form">
Model : <?php echo $maxMod["nbmod"]; ?>
<select name="moId" id="idmoId" onChange='go()'> 
		  <option> selectionner qqch</option>
<?php
		$query="SELECT moId,moName FROM Model ORDER BY moName ASC";
		$req=Db_Query($query,$db);
		while($row=Db_GetArray($req))
		{
			$selected=($row["moId"]==$moId)?" selected=\"selected\"":"";
			$selectModel.="<option value=\"".$row["moId"]."\"".$selected.">".$row["moName"]."</option>\n";
			echo $selectModel ;
		}
?>
</select>
<select name="mseId" id="idmseId"  style='display:inline'>
		<option value='-1'>Choisir un modèle</option>
</select>
</form>
</body>
</html>

et deuxième page :

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
<?php
	echo "<select name='mseId'>";
	if(isset($_POST["moId"]))
	{
		$query="SELECT mseId,mseName FROM ModelSet "; 
		$query .= " WHERE msemoId  = " .print $row["moId"] ;
		$query .= " ORDER BY mseName ASC ;" ;
		$req=Db_Query($query,$db);
		echo $query;
		while($row=Db_GetArray($req))
		{
			$selected=($row["mseId"]==$mseId)?" selected=\"selected\"":"";
			$selectSet.="<option value=\"".$row["mseId"]."\"".$selected.">".$row["mseName"]."</option> 	";
			echo $selectSet ;
		}
	}
	echo "</select>";
?>

cependant je sais que j'ai un problème au niveau de la variable moId

**le_chomeur** · 13/02/2008, 10h34

A ce que je vois , tu appels une 2eme page dans laquelle tu as :

Code :

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

echo "<select name='mseId'>";

pour allez alimenter dans la première page une liste a partir de cette 2eme page ...

enlève donc le select de la 2 eme page

**sadkat** · 13/02/2008, 10h48

alors oui ça a bien enlevé la liste imbriqué, seulement maintenant il ne va plus jamais dans la deuxième page... je lui ai mis echo "titi"; juste après la balise <?php
et jms rien ne s'affiche....

en tout cas merci d'essayé de m'aider

ps : sur le code que je suis (dt je t'ai donné le lien) il y ai bien le echo "<select ...."

**le_chomeur** · 13/02/2008, 10h56

il faut enlevé le select de la 2 eme page lol puisque tu as ton action sur le premier :

Code :

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

<select name="moId" id="idmoId" onChange='go()'>

**sadkat** · 13/02/2008, 10h59

ho excuse moi je suis une boulette mais je ne comprend pas ce que tu veux faire.

enfin si, je comprend que tu veux effectivement que j'enleve le select de la deuxième, mais après ça je n'arrive plus a y acceder à cette deuxième page.. ata je test si avant j'y accedais réelement !

edit : ha ba non.. bon ok, je cherche encore alors, en tout cas tu avais raison pour la liste imbriquée merci !

**sadkat** · 13/02/2008, 11h14

Si tu passes encore par là, tu peux m'expliquer ce que signifi ce code :

Code :

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

1
2
3
4
5
6
if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('idmseId').innerHTML = leselect;
 
					}

et pourquoi mon code ne va pas plus loin ?

edit : non en faite c'est aparement normal qu'il n'y passe pas, il va directement dans le else.

salut, voilà il n'y a pas "d'erreur" dans mon code, au sens ou j'ai pas de message d'alert ect...
Cependant ma deuxième liste n'est jamais remplie, pouvez vous m'aider ?
Ce que je pense c'est que la deuxième page n'est jamais chargée, puisque jamais je ne vois affiché "titi".

Regardez par vous meme svp

première page (auteurs.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
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
<?php
include("_session.php");
if(!$editDev)
        exit("Forbidden!");
if(!$userId)
{
        header("Location: login.php");
        exit();
}
$CurrentPage="admin";
$db=Db_ConnectToProduct("vhd");
 
$ReqNbMod="SELECT count( DISTINCT `moId` ) as nbmod FROM `Model` ";
$ResNbMod=Db_Query($ReqNbMod,$db);
$maxMod = Db_GetArray($ResNbMod);
 
?>
 
<html>
<head>
	<title>validation croisée </title> 
<SCRIPT language="JavaScript" 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('idmseId').innerHTML = leselect;									
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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('SidmoId');
				MonidMod = sel.options[sel.selectedIndex].value;
				xhr.send("moId="+MonidMod);	
				alert (MonidMod);				
			}
 
 
</SCRIPT>
</head>
 
<body>
<form  name = "form" method="post" action="ajaxLivre.php">
Model : <?php echo $maxMod["nbmod"]; ?>
<select name="SmodId" id="SidmoId" onChange='go()'>  
 
		  <option> selectionner qqch</option>
<?php
		$query="SELECT moId,moName FROM Model ORDER BY moName ASC";
		$req=Db_Query($query,$db);
		while($row=Db_GetArray($req))
			{
		$selected=($row["moId"]==$moId)?" selected=\"selected\"":"";
		 echo $selectModel="<option value=\"".$row["moId"]."\"".$selected.">".$row["moName"]."</option>\n";
			}
?>
</select>
<select name="mseId" id="idmseId"  style='display:inline'>
		<option value='-1'>Choisir un modèle</option>
</select>
</form>
</body>
</html>

deuxième page (ajaxLivre.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
<?php
	//echo "<select name='mseId'>";
			echo ("titi");
	if(isset($_POST["moId"]))
	{
 
		$query="SELECT mseId,mseName FROM ModelSet "; 
		$query .= " WHERE msemoId  = " .$_POST["moId"] ;
		$query .= " ORDER BY mseName ASC ;" ;
		$req=Db_Query($query,$db);
		echo $query;
		while($row=Db_GetArray($req))
		{
			$selected=($row["mseId"]==$mseId)?" selected=\"selected\"":"";
			$selectSet.="<option value=\"".$row["mseId"]."\"".$selected.">".$row["mseName"]."</option> 	";
			echo $selectSet ;
		}
	}
	//echo "</select>";
?>

sachant que je débute en javascript et ajax, je ne comprend rien aux fonctions utilisées...

**sadkat** · 14/02/2008, 10h34

ma liste ne se rempli pas, en fait le "toto" s'affiche mais pas le "titi" (ajaxLivre2), voila le code maintenant :

première page (auteurs2):

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
 
<?php
include("_session.php");
if(!$editDev)
exit("Forbidden!");
if(!$userId)
{
header("Location: login.php");
exit();
}
$CurrentPage="admin";
$db=Db_ConnectToProduct("vhd");
 
$ReqNbMod="SELECT count( DISTINCT `moId` ) as nbmod FROM `Model` ";
$ResNbMod=Db_Query($ReqNbMod,$db);
$maxMod = Db_GetArray($ResNbMod);
?>
 
<html>
<head>
<title>validation croisée </title>
<SCRIPT language="JavaScript" type='text/javascript'>
 
 
function getXHR()
{ var newReq = null;
if(window.XMLHttpRequest)
{
try
{
newReq = new XMLHttpRequest();
} catch(e)
{
newReq = false;
}
}
else if(window.ActiveXObject)
{
try
{
newReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
newReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
newReq = false;
}
}
} return newReq;
}
 
function loadXHR(url,methode,id)
{
var req = getXHR();
req_global = req;
req.open(methode,url,true);
req.send(null);
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
rhttp = req.responseText;
if(document.getElementById(id))
document.getElementById(id).innerHTML = rhttp;
}
}
}
 
 
</SCRIPT>
</head>
 
<body>
<form name = "form" method="post" action="ajaxLivre2.php">
Model : <?php echo $maxMod["nbmod"]; ?>
 
<select name="SmodId" id="SidmoId" onChange="loadXHR('ajaxLivre2.php?mold='+this.options[this.selectedIndex].value,'GET','idmseId')">
<option> selectionner qqch</option>
<?php
$query="SELECT moId,moName FROM Model ORDER BY moName ASC";
$req=Db_Query($query,$db);
while($row=Db_GetArray($req))
{
$selected=($row["moId"]==$moId)?" selected=\"selected\"":"";
echo $selectModel="<option value=\"".$row["moId"]."\"".$selected.">".$row["moName"]."</option>\n";
}
?>
</select>
 
<div id="idmseId">
</div>
 
</form>
</body>
</html>

et la deuxième (ajaxLivre2) :

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
 
<?php
echo "toto";
echo "<select name='mseId'>";
echo "titi";
if(isset($_POST["SidmoId"]))
{
 
$query="SELECT mseId,mseName FROM ModelSet ";
$query .= " WHERE msemoId = " .$_POST["SidmoId"] ;
$query .= " ORDER BY mseName ASC ;" ;
$req=Db_Query($query,$db);
echo $query;
while($row=Db_GetArray($req))
{
$selected=($row["mseId"]==$mseId)?" selected=\"selected\"":"";
echo $selectSet="<option value=\"".$row["mseId"]."\"".$selected.">".$row["mseName"]."</option> ";
}
}
echo "</select>";
?>

**_Mac_** · 14/02/2008, 11h15

Ca me rappelle quelque chose, ça, mais je n'arrive pas à remettre la main dessus !! En utilisant innerHTML sur un select, pour une raison inconnue, les premiers <option> sont zappés. En gros c'est un bug. Le seul moyen qu'on a trouvé a été de reconstruire la liste complète en faisant dans new Option(). A mon avis, t'as pas d'autre choix que de faire comme ça. Tu trouveras des codes d'exemple un peu partout (ici par exemple).

**SpaceFrog** · 14/02/2008, 11h27

le plus simple est encore de reconstruire tout le select voir cette discussion:
http://www.developpez.net/forums/sho...d.php?t=490328

**sadkat** · 14/02/2008, 13h24

j'ai lue, j'ai regardé la documentation (l'anglais c'est pas mon fort pr tout vous dire) et j'ai pas très bien compris. ça vous ennuierais de m'expliquer un peu l'interet des innerHTML, et comment elles s'utilisent ?

s'il vous plait

**SpaceFrog** · 14/02/2008, 13h34

lol le lien que je t'ai donné c'est en français puisque c'est sur developpez ^^

au lieu de ne renvoyer que le code des options, il faut que le response texte retourne l'intégralité du select ...

**sadkat** · 14/02/2008, 14h55

bon non en fait c'est bon c'est juste que j'avais utilisé Get en première page et Post en deuxième...

Merci quand meme

Erreur de code avec Ajax

JavaScript

Discussions similaires

Partager

Partager