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

Version imprimable

07/09/2006, 15h00
metatron

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

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.

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

Code:

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

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:

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:

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:

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>";
?>

11/09/2006, 20h01
FremyCompany

recherche: AJAX requetes

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

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:

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:

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>";
?>

12/09/2006, 10h48
rieppe

Salut,

Remplace la ligne :

Code:

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

Par :

Code:

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

Juste une erreur de code ^_^
12/09/2006, 11h23
metatron

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 :/

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:

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 :)

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:

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:

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>";
?>

13/09/2006, 15h20
rieppe

Resalut,

Tu fais :

Code:

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:

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

On va y arriver :mur: ^^

EDIT : Pareil quand tu sélectionne ta première liste :

Code:

sel = document.getElementById('phplist_listattr_typedevehi');

Alors que son id est 'type'

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

Code:

sel = document.getElementById('type');

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:

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:

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:

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>";
?>

Salutations,

Essaye de voir si tu passes bien les tests dans ton fichier php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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 ? ^^

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:

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:

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.

19/09/2006, 19h44
rieppe

Citation:

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 ?

é 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:

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:

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:

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";
    }
?>

20/09/2006, 11h34
denisC

Citation:

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?
20/09/2006, 11h42
Bisûnûrs
Citation:

Envoyé par denisC

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

Si.

Bases :
Code:

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

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:

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:

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:

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. :)

20/09/2006, 15h12
denisC

Citation:

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?
20/09/2006, 15h46
rieppe
Salut salut :)

Alors essaye de changer ta requête comme ca :
Code:

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 :

Citation:

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 :D

ok...donc je viens de reverifier et remodifier, je ne vois pas ce qui cloche, le resultat est le meme : les differents types s'affichent bien dans la 1ere liste, je selectionne, la 2e liste reste vide. plusieurs points :

- pourquoi ai-je 2 fois "<select name='marque'>" , un dans ajaxMarques.php, l'autre dans type.php ?

- dans le "<select name='type' id='IDtype' onchange='go()'>" de type.php, le id="IDtype" correspond til bien a la valeur que je veux recupere ?

- denisC, comment tu t y prendrai pour mettre un argument en post drectement dans ajaxMarques.php ?

-j'ai modifié la valeur de l'id du DIV, merci.

voila le détail, si quelqu'un voit ce qui ne va pas faites signe, c'est devenu une chasse aux tresors la oO :=) :

la bdd :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
-- Structure de la table `phplist_listattr_marque`
-- 
 
CREATE TABLE `phplist_listattr_marque` (
  `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`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=643 ;
 
-- 
-- Contenu de la table `phplist_listattr_marque`
-- 
 
INSERT INTO `phplist_listattr_marque` VALUES (363, 'AJP', 0, 'MT');
INSERT INTO `phplist_listattr_marque` VALUES (362, 'peugeot', 0, 'MT');
 
 
-- --------------------------------------------------------
 
-- 
-- 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`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
 
-- 
-- Contenu de la table `phplist_listattr_typedevehi`
-- 
 
INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'Cyclo', 0, 'CL');
INSERT INTO `phplist_listattr_typedevehi` VALUES (2, 'Moto', 0, 'MT');

type.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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='bloc' style='display:inline'>
				<select name='marque'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxMarques.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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["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";
    }
?>

20/09/2006, 17h07
Bisûnûrs

DenisC veut dire que tu dois essayer d'accéder à ton fichier ajaxMarques.php directement via la barre d'adresses de ton navigateur.

Par exemple : http://monsite.com/ajaxMarques.php?IDtype=3

Comme ça tu vois s'il t'affiche un bon XML.
20/09/2006, 17h11
metatron

Citation:

Envoyé par BisounoursJos

DenisC veut dire que tu dois essayer d'accéder à ton fichier ajaxMarques.php directement via la barre d'adresses de ton navigateur.

Par exemple : http://monsite.com/ajaxMarques.php?IDtype=3

Comme ça tu vois s'il t'affiche un bon XML.

ah bah c'est bien ce que je pensais alors, j'avais testé de mettre le ?IDtype=3 apres l'adresse (mais je ne l'avais pas precisé car je pensais que c'etait du GET = visible dans l'URL cette methode non ??)

Et en tout cas ca ne fonctionne pas, ca m'affiche : IDtype non défini :(

Alors, tu avais une erreur dans ton fichier ajaxMarques.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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["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";
	}
?>

Une erreur dans la selection de IDtype dans ton js et dans l'id de ton div ^^ :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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('bloc').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('IDtype');
			   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>
					<?php
						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='bloc' style='display:inline'>
					<select name='marque'>
						<option value='-1'>Choisir un auteur</option>
					</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Voilà sauf faute de copier/coller tu devrais t'en sortir cette fois :P

20/09/2006, 17h27
metatron

YEAHH ! merci bcp ! on y ets arrivé keumeme oO
que de fautes d'etourdries :=) Merci a rieppe et tou tl monde. Dans la plupart des sections ou j'ai été, a chaque fois une solution fiable et carré. Ce forum et site n'as pas d'egal franco ou anglophone :=)
20/09/2006, 17h29
rieppe

Citation:

Envoyé par metatron

une solution fiable et carré

Oui enfin un truc qui fonctionne quoi ^_^

Bon courage pour la suite de ton développement ;)

oups. Alors donc maintenant la liste dynamique marche ok :=), mais j'aimerai inserer mes données dans la base, et la pour les marques par exemple je ne vois pas ou l'attribut de la liste et la valeur choisie peut etre récuperée ?

Avant dans mon formulaire statique j'avais ca :
Code:

1 2 3 4 5 6 7 8 Type_Vehicule : <select name="attribute43" class="attributeinput"> <option value="1" >voiture <option value="4" >moto </select> Marque véhicule :<select name="attribute44" class="attributeinput"> <option value="361" >peugeot <option value="367" >opel
et donc quand je validais, ca inserait la valeur de liste via "attribute43, attribute44, value=1" etc...

Hors la quand je regarde dans le code source, je ne vois aucune "value" et nom d'attribut pour les marques de véhicules...comment je peux faire pour obtenir ces valeur et qu'elles s'inserent dans ma base ?

20/09/2006, 18h15
rieppe

Normal que tu ne vois pas en affichant le source.

Mais ta liste est bien là et remplie non ?

Ajoute juste un bouton submit et tes données seront posté vers le script que tu choisis dans l'attribut action de ta balise form.
21/09/2006, 10h09
metatron

oui ma liste ets bien remplie comme il faut et j'ai deja mon bouton submit. mais je me demandais a quoi correspondrait le vlue de <option value="...>peugeot par exemple...l'IDtype ? (du a echo "<option value='".$row["id"]."'>".$row["name"]."</option>";) ?
21/09/2006, 16h09
rieppe

Citation:

Envoyé par metatron

oui ma liste ets bien remplie comme il faut et j'ai deja mon bouton submit. mais je me demandais a quoi correspondrait le vlue de <option value="...>peugeot par exemple...l'IDtype ? (du a echo "<option value='".$row["id"]."'>".$row["name"]."</option>";) ?

Yep tout à fait.

Un select te renverra en post le contenu du "value" de l'élément sélectionné.
22/09/2006, 14h54
metatron

Re, j'ai donc modifié ma table et ajaxMarques.php, pour que quand on choisisse une marque dans la 2e liste cela corresponde a un ID dans la base....seulement dans le code source de ma page, je ne vois pas ces valeurs :s (enfin le value de chaque valeur dans la liste déroulante). Donc comment les rentrer dans la base ??
22/09/2006, 15h15
Bisûnûrs

C'est normal que tu ne les voies pas dans le code source de la page.

Tu peux télécharger Firefox et son add-on Webdeveloper, faire clic-droit > Web Developer > View Source > View Generated Source ce qui te permettra de voir le code source généré.

Tu verras que tes éléments sont bien là. Donc tu récupères les valeurs comme un formulaire "standard".
22/09/2006, 15h53
rieppe

Interessant ce module FFox :D
09/10/2006, 09h30
fichtre!

Bonjour,

J'ai lu avec intérèt ce sujet, car je me suis heurté aux mêmes problèmes en essayant d'adapter ces scripts sur mon projet de site.
Ma question maintenant, n'étant vraiment pas un pro du javascript, est comment rendre la fonction "go" dynamique afin de pouvoir récupérer des valeurs passées par l'intermédiaire de champs de type "hidden" et qui contiendrait, par exemple, le nom de la page où devront être retournées les données, le nom de la balise ...
Bref, le but étant de pouvoir appeller la fonction "go" depuis differents formulaires.

Merci d'avance pour vos pistes.

Eric