[AJAX] listes dynamiques li�es a la premiere avec XMLhttpRequest

**metatron** · 07/09/2006, 15h00

Bonjour, voila apres avoir tent� de lier ma 2e liste dynamique en fonction de ce qui est choisi dans la premiere (sans rafraichir la page bien sur), en php, JS, et que ce ne m'arrange pas trop (car mon <form action="" est deja occupe), j'ai decide de tester avec XMLhttprequest..
J ai vu ces 2 docs :

http://siddh.developpez.com/articles/ajax/

http://dcabasson.developpez.com/arti...ion-pas-a-pas/

Et alors ce que j'aimerai bien, c'est qu'on me montre en "gros", les differentes etapes a effectuer et bouts de code a utiliser pour obtenir ce lien entre les 2 listes.

pour le moment ca se passe comme ca en gros :

- ma premiere liste apelle le champs_A de la table_1; 4 valeurs, en fonction de la valeur selectionn�e (donc tout en IF je pense..?) cela va selectionner les valeurs correspondantes du champs_B
- 2e liste affichant les valeurs du champs_B, en fonction de la valeur du champ_A choisi.

Voila si vous pourriez me fournir quelques explication pour la bonne realisation des 2 listes, ce serait simpa. Merci d'avance.

**FremyCompany** · 07/09/2006, 20h15

La fonction rechercher ca existe... les posts impotants du forum aussi...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
    Important : <a href="http://www.developpez.net/forums/showthread.php?t=84315" target="_blank">Les cours javascript</a>                 siddh
    Important : <a href="http://www.developpez.net/forums/showthread.php?t=598" target="_blank">Listes déroulantes liées entre elle</a>  jérôme

**metatron** · 11/09/2006, 13h42

Bonjour,

donc j'ai test� le tuto Ajax et Siddh (http://siddh.developpez.com/articles/ajax/#LIV-A). Mes tables sont exactment les memes que dans l'exemple, � l'exception des valeurs, mais la structure est la meme :

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
CREATE TABLE `phplist_listattr_marque` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) TYPE=MyISAM AUTO_INCREMENT=248 ;
 
INSERT INTO `phplist_listattr_marque` VALUES (6, 'peugeot', '2');
 
 
CREATE TABLE `phplist_listattr_typedevehi` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `listorder` int(11) default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) TYPE=MyISAM AUTO_INCREMENT=6 ;
 
INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'routiere', 0);

J'ai ensuite remplac� les variables correspondantes mais rien ! je n'ai aucune valeur qui s'affiche dans les listes, elles sont vides...Pourriez vous me dire ou jai oubli� quelque chose ou ce qui ne va pas selon vous, merci d'avance :

Types.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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
			function getXhr(){
				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; 
				} 
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
				idtype = sel.options[sel.selectedIndex].value;
				xhr.send("idtype="+idtype);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='type' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("phplistdb");
						$res = mysql_query("SELECT * FROM phplist_listattr_typedevehi ORDER BY type");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.php :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='marque'>";
	if(isset($_POST["IDtype"])){
		mysql_connect("localhost","root","");
		mysql_select_db("phplistdb");
		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
		}
	}
	echo "</select>";
?>

**FremyCompany** · 11/09/2006, 20h01

recherche: AJAX requetes

http://www.developpez.net/forums/sho...JAX+requ%EAtes

**metatron** · 11/09/2006, 23h10

oui aprdon je ne l'avais pas vu celui la... j'ai donc supprime la fonction getXhr et remplace la par ton code, mais ca ne va pas mieux :/ . Les listes d�roulantes restent vides...

type.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
100
101
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le script du tutoriel AJAX (developpez.com)
getXhr=GetXmlHttpRequest;
 
 
 
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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('phplist_listattr_marque').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
				idtype = sel.options[sel.selectedIndex].value;
				xhr.send("idtype="+idtype);
			}
		</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='type' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("phplistdb");
						$res = mysql_query("SELECT * FROM phplist_listattr_typedevehi ORDER BY type");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.php :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='marque'>";
	if(isset($_POST["IDtype"])){
		mysql_connect("localhost","root","");
		mysql_select_db("phplistdb");
		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
		}
	}
	echo "</select>";
?>

**rieppe** · 12/09/2006, 10h48

Salut,

Remplace la ligne :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Par :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Juste une erreur de code ^_^

**metatron** · 12/09/2006, 11h23

lu rieppe, merci de t'etre pench� sur le probleme, mais malheuresement ca ne vient pas de la :/ je viens de changer le code et les listes restent toujours vides :/

**rieppe** · 12/09/2006, 14h58

Alors ^^

As tu garder la variable globale xhr ?

Moi qui ai eu le m�me probl�me (et qui a �t� aid� par FremyCompany aussi, encore merci� lui

), j'ai utilis� une variable locale � ma fonction fait appel au script php.

En gros j'aurais ca :

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
/**
* 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('phplist_listattr_marque').innerHTML = leselect;
      }
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
   idtype = sel.options[sel.selectedIndex].value;
   xhr.send("idtype="+idtype);
}

Chez moi cela fonctionne maintenant depuis un moment ^_^, en esp�rant que ca fasse de m�me chez toi

**metatron** · 13/09/2006, 11h13

D�cidemment

j'ai remis la fonction go comme tu l'as fais, mais toujours aucun changement, mes listes restent vides

.

Quelqu' un aurait une id�e ?

types.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
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le script du tutoriel AJAX (developpez.com)
getXhr=GetXmlHttpRequest;
 
			/**
			* 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('phplist_listattr_marque').innerHTML = leselect;
      }
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
   idtype = sel.options[sel.selectedIndex].value;
   xhr.send("idtype="+idtype);
}
		</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='type' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("phplistdb");
						$res = mysql_query("SELECT * FROM phplist_listattr_typedevehi ORDER BY type");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.php :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='marque'>";
	if(isset($_POST["IDtype"])){
		mysql_connect("localhost","root","");
		mysql_select_db("phplistdb");
		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
		}
	}
	echo "</select>";
?>

**rieppe** · 13/09/2006, 15h20

Resalut,

Tu fais :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Or je ne vois aucun �l�ment avec un id = 'phplist_listattr_marque'. Ton div � modifier a l'id 'marque', il me semble.

Remplace donc cette ligne par :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

On va y arriver

^^

EDIT : Pareil quand tu s�lectionne ta premi�re liste :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

sel = document.getElementById('phplist_listattr_typedevehi');

Alors que son id est 'type'

Donc de la m�me mani�re remplace cette ligne par :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

sel = document.getElementById('type');

**metatron** · 15/09/2006, 10h35

Mwarf decidemment :/ donc oui yavait quelques erreur que j'ai corrig�..mais le slistes d�roulantes restent toujours vides ! cette fois ci je ne vois vraiement pas d ou cela peut venir :

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
CREATE TABLE `phplist_listattr_marque` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) TYPE=MyISAM AUTO_INCREMENT=248 ;
 
INSERT INTO `phplist_listattr_marque` VALUES (6, 'peugeot', '2');
 
 
CREATE TABLE `phplist_listattr_typedevehi` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `listorder` int(11) default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) TYPE=MyISAM AUTO_INCREMENT=6 ;
 
INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'routiere', 0);

type.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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le script du tutoriel AJAX (developpez.com)
getXhr=GetXmlHttpRequest;
 
			/**
			* 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('marque').innerHTML = leselect;
      }
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxMarques.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('type');
   idtype = sel.options[sel.selectedIndex].value;
   xhr.send("IDtype="+idtype);
}
		</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='type' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("phplistdb");
						$res = mysql_query("SELECT name FROM phplist_listattr_typedevehi ORDER BY name");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.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
 
<?php
	echo "<select name='marque'>";
	if(isset($_POST["IDtype"])){
		mysql_connect("localhost","root","");
		mysql_select_db("phplistdb");
		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
		}
	}
	echo "</select>";
?>

**rieppe** · 15/09/2006, 14h27

Salutations,

Essaye de voir si tu passes bien les tests dans ton fichier 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
<?php
	if(isset($_POST["IDtype"])){
		if (mysql_connect("localhost","root","") ) {
			if (mysql_select_db("phplistdb") ) {
				$requete = "SELECT id,marque FROM phplist_listattr_marque WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque";
				if ($res = mysql_query() ) {
					echo "<select name='marque'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
					}
					echo "</select>";
				} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "IDtype non défini";
    }
?>

Et vois ta requ�te, "marque" ne fait pas partie de la table "phplist_listattr_marque", du moins dans la d�finition que tu donne. Donc ton "order by marque" va coincer ^_^. Ptete juste une erreur de requ�te, je connais, c'est rageant non ? ^^

**metatron** · 19/09/2006, 16h56

Rebonjour, euh coment d�clarer la variable IDtype dans ton exemple pour lui donner une valeur ? car la il me dit IDtype non d�fini comme ca.

revoila le code de la bdd et l'exemple utilis�, sans erreur de noms de variables :

test.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
<?php
	if(isset($_POST["IDtype"])){
		if (mysql_connect("localhost","root","") ) {
			if (mysql_select_db("listes") ) {
				$requete = "SELECT id,name FROM phplist_listattr_marque WHERE IDtype=".$_POST["IDtype"]." ORDER BY name";
				if ($res = mysql_query() ) {
					echo "<select name='marque'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
					}
					echo "</select>";
				} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "IDtype non défini";
    }
?>

bdd :

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
 
-- Structure de la table `phplist_listattr_marque`
-- 
 
CREATE TABLE `phplist_listattr_marque` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=248 ;
 
-- 
-- Contenu de la table `phplist_listattr_marque`
-- 
 
INSERT INTO `phplist_listattr_marque` VALUES (6, 'peugeot', '1');
 
-- --------------------------------------------------------
 
-- 
-- Structure de la table `phplist_listattr_typedevehi`
-- 
 
CREATE TABLE `phplist_listattr_typedevehi` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `listorder` int(11) default '0',
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
 
-- 
-- Contenu de la table `phplist_listattr_typedevehi`
-- 
 
INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'cyclo', 0, '1');

Merci d'avance de votre aide.

**rieppe** · 19/09/2006, 19h44

Envoy� par metatron

Rebonjour, euh coment d�clarer la variable IDtype dans ton exemple pour lui donner une valeur ? car la il me dit IDtype non d�fini comme ca.

Hello, ta variable IDtype est post�e lors de ton "appel" au script php par xhr.send(). Donc tu dois avoir un probleme dans le nom de ta variable non ?

**metatron** · 20/09/2006, 10h55

� b�...merci de ta patience en tout cas rieppe oO.

Donc je viens de re tester, verifier les noms de variables etc...et maintenant dans ma 1ere liste, je vois bien les types de v�hicules, j'en selectionne un, et hop message d'erreur :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
Warning: Wrong parameter count for mysql_query() in c:\program files\easyphp1-8\www\listes\ajaxmarques.php on line 6
Erreur de requ�te

la ligne 6 correspond au if ($res = mysql_query() ) { ?? Sauriez vous ce qui ne va pas ? revoila le code que j'ai utlis� :

type.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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le script du tutoriel AJAX (developpez.com)
getXhr=GetXmlHttpRequest;
 
			/**
			* 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('marque').innerHTML = leselect;
      }
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxMarques.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('type');
   idtype = sel.options[sel.selectedIndex].value;
   xhr.send("IDtype="+idtype);
}
		</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='type' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("listes");
						$res = mysql_query("SELECT id,name FROM phplist_listattr_typedevehi ORDER BY name");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.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
<?php
	if(isset($_POST["IDtype"])){
		if (mysql_connect("localhost","root","") ) {
			if (mysql_select_db("listes") ) {
				$requete = "SELECT id,name FROM phplist_listattr_marque WHERE IDtype=".$_POST["IDtype"]." ORDER BY name";
				if ($res = mysql_query() ) {
					echo "<select name='marque'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
					}
					echo "</select>";
				} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "IDtype non défini";
    }
?>

**denisC** · 20/09/2006, 11h34

Envoy� par metatron

la ligne 6 correspond au if ($res = mysql_query() ) { ?? Sauriez vous ce qui ne va pas ? revoila le code que j'ai utlis� :

Je suis pas sp�cialiste en PHP, mais il ne manquerait pas la requete � �xecuter?

**Bis�n�rs** · 20/09/2006, 11h42

Envoy� par denisC

Je suis pas sp�cialiste en PHP, mais il ne manquerait pas la requete � �xecuter?

Si.

Bases :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
$sql = "la requête";
 
$req = mysql_query($sql) or die("Erreur SQL : ".mysql_error());
 
$val = mysql_fetch_array($req);

**metatron** · 20/09/2006, 13h51

Oups oui en effet je l'avais omis, ca a �t� mieux apres. Malheuresement je ne reussi tjs pas a afficher la 2e liste en fonction de la premiere :/

Ma table type : avec un nom de type, et un IDtype
Ma table marque : avec un nom de marque, et la valeur de l'IDtype correspondante. Voila le detail :

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
 
-- Structure de la table `phplist_listattr_marque`
-- 
 
CREATE TABLE `phplist_listattr_marque` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=248 ;
 
-- 
-- Contenu de la table `phplist_listattr_marque`
-- 
 
INSERT INTO `phplist_listattr_marque` VALUES (6, 'peugeot', 'CL');
 
-- --------------------------------------------------------
 
-- 
-- Structure de la table `phplist_listattr_typedevehi`
-- 
 
CREATE TABLE `phplist_listattr_typedevehi` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `listorder` int(11) default '0',
  `IDtype` varchar(11) NOT NULL default '',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 
-- 
-- Contenu de la table `phplist_listattr_typedevehi`
-- 
 
INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'cyclo', 0, 'CL');
INSERT INTO `phplist_listattr_typedevehi` VALUES (6, 'moto', 0, 'MT');

type.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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
 
	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le script du tutoriel AJAX (developpez.com)
getXhr=GetXmlHttpRequest;
 
			/**
			* 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('marque').innerHTML = leselect;
      }
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxMarques.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('type');
   idtype = sel.options[sel.selectedIndex].value;
   xhr.send("IDtype="+idtype);
}
		</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Types</label>
				<select name='type' id='IDtype' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("listes");
						$res = mysql_query("SELECT name,IDtype FROM phplist_listattr_typedevehi ORDER BY name");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["IDtype"]."'>".$row["name"]."</option>";
						}
					?>
				</select>
				<label>Marques</label>
				<div id='marque' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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
ajaxMarques.php :
 
<?php
	if(isset($_POST["IDtype"])){
		if (mysql_connect("localhost","root","") ) {
			if (mysql_select_db("listes") ) {
				$requete = "SELECT name,IDtype FROM phplist_listattr_marque WHERE IDtype=".$_POST["IDtype"]." ORDER BY name";
				if ($res = mysql_query($requete) ) {
					echo "<select name='marque'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["IDtype"]."'>".$row["name"]."</option>";
					}
					echo "</select>";
				} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "IDtype non défini";
    }
?>

Dans la 1ere liste je vois bien les valeurs de la table type, j'en selectionne une, mais il ne s epasse rien, la 2e liste reste vide :/

Sauriez vous ce qui ne va pas dans tout ca ? Merci d'avance de votre aide.

**denisC** · 20/09/2006, 15h12

Envoy� par metatron

Sauriez vous ce qui ne va pas dans tout ca ? Merci d'avance de votre aide.

Tu as essay� d'appeller directement ta page ajaxMarques.php? (avec un argument en post), �a donne ce que tu attendais?

Sinon, c'est g�n�ralement une mauvaise id�e (dans IE) d'avoir deux �lements diff�rents avec des name/id identiques. Ici, tu as un select name="marque" avec un div id="marque", c'est pas une bonne id�e pour IE.

Sinon, tu as mis des alerts dans ton javascript (au moment du passage de la requete, de son retour, de l'appel � la m�thode) pour savoir � quel moment �a bloque?

**rieppe** · 20/09/2006, 15h46

Salut salut

Alors essaye de changer ta requ�te comme ca :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
ajaxMarques.php ...
$requete = "SELECT name,IDtype FROM phplist_listattr_marque WHERE IDtype='".$_POST["IDtype"]."' ORDER BY name";

Juste � remarquer que IDtype est un varchar dans ta table et que ainsi, il faut lui donner une chaine de caract�res pour la s�lection.

EDIT :

Envoy� par metatron

� b�...merci de ta patience en tout cas rieppe oO.

Ya pas de quoi. Je fais les m�mes erreurs autant faire profiter les autres des solutions

[AJAX] listes dynamiques li�es a la premiere avec XMLhttpRequest

JavaScript

Discussions similaires

Partager

Partager