[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