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

**metatron** · 20/09/2006, 16h15

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 :

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,
  `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 :

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

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

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.

**metatron** · 20/09/2006, 17h11

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

**rieppe** · 20/09/2006, 17h16

Alors, tu avais une erreur dans ton fichier 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 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 :

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('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

**metatron** · 20/09/2006, 17h27

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

**rieppe** · 20/09/2006, 17h29

Envoyé par metatron

une solution fiable et carré

Oui enfin un truc qui fonctionne quoi ^_^

Bon courage pour la suite de ton développement

**metatron** · 20/09/2006, 17h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**rieppe** · 20/09/2006, 18h15

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.

**metatron** · 21/09/2006, 10h09

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

?

**rieppe** · 21/09/2006, 16h09

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

**metatron** · 22/09/2006, 14h54

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

**Bisûnûrs** · 22/09/2006, 15h15

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".

**rieppe** · 22/09/2006, 15h53

Interessant ce module FFox

**fichtre!** · 09/10/2006, 09h30

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

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

JavaScript

Discussions similaires

Partager

Partager