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