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

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

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, 21h15

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, 14h42

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, 21h01

recherche: AJAX requetes

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

**metatron** · 12/09/2006, 00h10

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, 11h48

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 ^_^

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager