[AJAX] enchainement de script ajax sur <select>

Version imprimable

Voir 40 message(s) de cette discussion en une page

12/09/2006, 09h46
lodan

[AJAX] enchainement de script ajax sur <select>

Bonjour, (la soluce est sur le post 62)

Je ne suis pas un grand sp�cialiste de javascript, ni de ajax, mais j'arrive � faire fonctionner mes script ajax pour l'alimentation de bo�tes <select>.

Je suis devant une �nigme :

J'ai un 1er <select> dans mon formulaire qui me permet de choisir un type de produit

Ce choix d�clenche un script ajax d'affichage des familles de produits

Jusque l� tout va bien.

Je veux que le choix de la famille d�clenche un script ajax d'affichage des sous familles.

Je ne vois pas du tout comment organiser mon code.

J'ai pens� faire comme ceci

Formulaire A pr�sentant les 3 selects. Les 2 derniers �tant fictif puisqu'ils attendent la r�ponse du 1er

Choix dans le formulaire A qui d�clenche un ajax avec un formulaire B qui pr�sente les Select 2 et 3. Le 2 est aliment�, le 3 est fictif.

Choix dans le formulaire B qui d�clenche un ajax avec un formulaire C qui pr�sente le Select 3.

Est-ce un bon raisonnement ?

En tout cas, j'ai essay�, mais je me retrouve � l'affichage avec 2 lignes <select> de sous famille.

Y-a un bug...

Merci de m'ouvrir les yeux
12/09/2006, 09h54
Bis�n�rs

En gros, ce que tu veux c'est un truc du style : http://www.pneus-online.fr/vente-pne...s-marques.html , champ "Recherche par v�hicule" ?
12/09/2006, 10h41
rieppe
Salut,

Je pense que ton raisonnement n'est pas mauvais.

J'ai fais un script similaire en jouant sur les onChange de mes select.

Pour actualiser les liste, je les ai mises dans des div pour pouvoir agir sur le innerHTML du div avec une fonction javascript afin d'en changer le contenu.

En gros :
- Liste 1: Sur changement, si le choix est vide, je vide les 2 autres listes, si le choix n'est pas vide, je fais une requ�te correspondant au choix effectu� et je met a jour la seconde liste
- Liste 2: Sur changement, Si le choix est vide je vide la troisieme liste, sinon je met a jour la 3eme liste avec une requ�te correpondant.
- Liste 3: Aucune action
Je sais pas si je r�pond un peut a ta question ^_^, enfin j'ai essay� :P
12/09/2006, 10h57
lodan

BisounoursJos, tu as gagn� c'est tout � fait �a et en plus je vais trouver des pneus pour ma caisse � savon
12/09/2006, 10h59
lodan

rieppe, tu me rassures sur mon raisonnement.

Tu as fait cela dans un seul javascript ?

Lorsque tu charges ton script php de chargement de ta seconde liste, tu n'as que le chargement de ta liste dans ce script ?

@lodan : Tu peux g�rer �a en trois fichiers :

Fichier contenant les <select> (index.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
<?
$sql = "ta requête";
$req = mysql_query($sql);
?>
<html>
<head>
   <title>Titre</titre>
   <script type="text/javascript" src="essentials.js"></script>
</head>
<body>
 
<!-- PREMIER SELECT -->
 
<select name="select1" id="select1" onChange="genererSelection(param1,param2,...);">
   <option value="">---------</option>
   <?
   while($val = mysql_fetch_array($req)){
      ?>
      <option value="<?=$val["champ1"]?>"><?=$val["champ2"]?></option>
      <?
   }
   ?>
</select>
 
<!-- DEUXIEME SELECT SE REMPLISSANT AUTOMATIQUEMENT -->
 
<select name="select2" id="select2" disabled>
   <option value="">---------</option>
</select>
 
<!-- TROISIEME SELECT SE REMPLISSANT AUTOMATIQUEMENT -->
 
<!-- ETC -->
 
</body>
</html>

Fichier XML (liste.php) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
 
$sql = "ta requête";
$req = mysql_query($sql);
 
while($val = mysql_fecth_array($req)){
   $inf .= "<balise1>".$val["champ1"]."</balise1>\n";
   $inf .= "<balise2>".$val["champ2"]."</balise2>\n";
   // ETC
}
 
$inf .= "</racine>";
print $inf;
?>

Fichier javascript (essentials.js) :

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
function genererSelection(param1,parama2,...){
   var xmlhttp = null;
   try{
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch(e){
      try{
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e){
         xmlhttp = false;
      }
   }
 
   if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
      xmlhttp = new XMLHttpRequest();
   }
 
   xmlhttp.open('GET', './liste.php?param1='+param1+'&param2='+param2, false);
   xmlhttp.setRequestHeader('User-Agent', 'Test generate select');
   xmlhttp.setRequestHeader('Accept', 'text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.7,*/*;q=0.1');
   xmlhttp.send(null);
 
   if(xmlhttp.status == 200){
      var liste1 = xmlhttp.responseXML.getElementsByTagName('balise1');
      var liste2 = xmlhttp.responseXML.getElementsByTagName('balise2');
 
      var liste_select = document.getElementById('select2');
      var tmp = document.createElement('option');
 
      while(document.getElementById('select2').options.length > 1){
         document.getElementById('select2').removeChild(document.getElementById('select2').options[1]);
      } 			
 
      for(var i = 0, m = liste1.length; i < m; i++){
         tmp.setAttribute('value', liste2[i].firstChild.nodeValue);
         tmp.appendChild(document.createTextNode(liste1[i].firstChild.nodeValue));
         liste_select.appendChild(tmp);
         tmp = tmp.cloneNode(false);
      }
 
      liste_select.disabled = false;
   }
}

Et tu cr��s une fonction selectmachinchose par <select> en plus dans ton premier fichier.

12/09/2006, 13h37
lodan

Merci BisounoursJos,

Qu'appels-tu param1, param2 ?

@lodan : Tu peux utiliser les params pour affiner ta requ�te dans le fichier liste.php

Je rajouterais tout en haut � ce fichier :
Code:

1 2 3 if(!isset($param1)) $param1=""; if(!isset($param2)) $param2=""; // ETC
Et donc dans la requ�te tu peux avoir :
Code:

1 2 3 4 $sql = "SELECT * FROM ma_table WHERE champ1 LIKE \"".$param1."\" AND champ2 LIKE \"".$param2."\"";

J'ai mis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- PREMIER SELECT -->
 
<select name="select1" id="select1" onChange="genererSelection(document.getElementById('select1'));">
   <option value="">---------</option>
   <?
   while($val = mysql_fetch_array($req)){
      ?>
      <option value="<?=$val["type_tiers_id"]?>"><?=$val["libelle"]?></option>
      <?
   }
   ?>
</select>

Puisque mon param�tre de la requ�te SELECT2 est l'id du choix du SELECT1

12/09/2006, 15h45
lodan

Pass� mon 1er select, je ne vois pas le 2�me, je passe dans le javascrip, j'ai mis un alert pour voir.

Mais apr�s plus rien.
12/09/2006, 15h52
Bis�n�rs

@lodan : Apparemment tu ne dois pas arriver � charger le fichier liste.php, v�rifie l'emplacement de celui-ci et arrange le chemin relatif de la ligne suivante du fichier essentials.js en cons�quence :

Code:

xmlhttp.open('GET', './liste.php?param1='+param1+'&param2='+param2, false);

Bonjour Docteur BisounoursJos,

Si si je suis toujours l�, j'essaye, mais je bloque sur cette erreur :

Code:

xmlhttp.responseXML has no properties

portant sur la ligne

Code:

var liste1 = xmlhttp.responseXML.getElementsByTagName('1');

Voici le html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
		<select name="bud_classe" id="bud_classe" onChange="goCategorie('')" tabindex="1">
  	 	<option value="-1">Aucun</option>
			{foreach from=$classes item=classe key=bud_classe}
			<option value="{$bud_classe}"
	  			{if ($bud_classe  == $budget.bud_classe)}
	  				selected
	  			{/if}
	  		>{$classe}</option>
	  		{/foreach}
	  	</select>
	  	</div>
	  	<div>
	  		{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie('','');">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie('');" disabled="disabled" tabindex="2">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>
		</div>

Le javascript :

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
function goCategorie(param1){
   var xmlhttp = null;
   alert("ici");
   try{
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch(e){
      try{
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e){
         xmlhttp = false;
      }
   }
 
   if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
      xmlhttp = new XMLHttpRequest();
   }
 
   xmlhttp.open('GET', '../ajax/ajaxCategorie.php?param1='+param1,false);
   xmlhttp.setRequestHeader('User-Agent', 'Test generate select');
   xmlhttp.setRequestHeader('Accept', 'text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.7,*/*;q=0.1');
   xmlhttp.send(null);
 
   if(xmlhttp.status == 200){
      var liste1 = xmlhttp.responseXML.getElementsByTagName('1');
      var liste2 = xmlhttp.responseXML.getElementsByTagName('2');
 
      var liste_select = document.getElementById('bud_categorie');
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_categorie').options.length > 1){
         document.getElementById('bud_categorie').removeChild(document.getElementById('bud_categorie').options[1]);
      } 			
 
      for(var i = 0, m = liste1.length; i < m; i++){
         tmp.setAttribute('value', liste2[i].firstChild.nodeValue);
         tmp.appendChild(document.createTextNode(liste1[i].firstChild.nodeValue));
         liste_select.appendChild(tmp);
         tmp = tmp.cloneNode(false);
      }
 
      liste_select.disabled = false;
   }
}

Mais l�, je ne vois pas ce qui se passe ?

Merci d'avance

14/09/2006, 10h06
Bis�n�rs

@lodan : Sur ta ligne :

Code:

var liste1 = xmlhttp.responseXML.getElementsByTagName('1');

tu fais correspondre le getElementsByTagName('1') au tableIndex de ton select dans ton fichier HTML c'est bien �a ?
Alors que la propri�t� getElementsByTagName attends le nom d'une balise en param�tre.
Dans mon exemple, c'�taient les balises du fichier XML qui �taient en param�tre de cette propri�t�.

heu !!!!

Voivi le xml que j'ai fait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
 
$sql = "SELECT id_bud_categorie, libelle, id_bud_classe
                FROM t_bud_categorie
                WHERE id_bud_classe= $param1
                WHERE `id_trt`>0 and `id_trt`<5
                ORDER BY `libelle`";
                
$req = mysql_query($sql);
 
while($val = mysql_fecth_array($req)){
   $inf .= "<balise1>".$val["champ1"]."</balise1>\n";
   $inf .= "<balise2>".$val["champ2"]."</balise2>\n";
   // ETC
}
 
$inf .= "</racine>";
print $inf;
?>

N'ayant pas trouv� de documentation sur <racine>, j'ai laiss� tel quel les balises en place, je ne conna�t que les boucle select avec <option>--</options>

Donc dans le javscript, j'ai remis <balise1> et <balise2>

Le message reste le m�me.

14/09/2006, 10h38
Bis�n�rs

Tout d'abord, en XML tu nommes toi-m�me tes balises comme tu veux, le tout �tant de bien les imbriquer. La balise <racine></racine> �tait un exemple, tu aurais pu l'appeler <toto></toto>, tout comme <balise1></balise1> aurait pu s'appeler <libelle></libelle>.

Aussi, dans ce fichier, rajoute au-dessus de

Code:

$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";

ce morceau :

Code:

if(!isset($param1)) $param1="";

Ensuite, je ne vois pas d'appel � la base de donn�es dans ton fichier XML, es-tu s�r de bien r�cup�rer les r�sultats de ta requ�te ?
R�sultats qui m'ont l'air faux, $val["champ1"] devant bien entendu �tre remplac� par le nom de ton champ s�lectionn� dans ta requ�te, soit $val["libelle"] par exemple.

Sinon, dans ton fichier javascript tu fais bien :

Code:

var liste1 = xmlhttp.responseXML.getElementsByTagName('balise1');

et non :

Code:

var liste1 = xmlhttp.responseXML.getElementsByTagName('<balise1>');

?

Dans mon javascript, j'ai bien param1 avec la bonne valeur, j'ouvre bien la base de donn�es, je ne t'avais pas mis le code correspondant.

L'erreur reste la m�me

Voici le xml revu

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if(!isset($param1)) $param1="";
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
 
$sql = "SELECT id_bud_categorie, libelle, id_bud_classe
		FROM t_bud_categorie
		WHERE id_bud_classe=\"$param1\"
		WHERE `id_trt`>0 and `id_trt`<5
		ORDER BY `libelle`";
 
$req = mysql_query($sql);
 
while($val = mysql_fecth_array($req)){
   $inf .= "<balise1>".$val["libelle"]."</balise1>\n";
   $inf .= "<balise2>".$val["libelle"]."</balise2>\n";
   // ETC
}
 
$inf .= "</racine>";
print $inf;

14/09/2006, 11h09
Bis�n�rs

@lodan : Peux-tu me montrer le code de ton fichier javascript ?

Affiche aussi le fichier XML en acc�dant directement au fichier dans la barre d'adresses, en n'oubliant pas de mettre les param�tres, par exemple :

Citation:

http://www.monsite.com/liste.php?param1=libelle

"libelle" �tant � remplacer par la valeur de ton champ id_bud_classe.
Et pour avancer dans le d�buggage, peux-tu faire un print $sql; apr�s ta requ�te dans ton fichier liste.php ?
14/09/2006, 11h14
lodan

J'ai l'erreur suivante

Code:

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in

Code:

1 2 3 4 5 $sql = "SELECT id_bud_categorie, libelle, id_bud_classe FROM t_bud_categorie WHERE id_bud_classe=\"$param1\" WHERE `id_trt`>0 and `id_trt`<5 ORDER BY `libelle`";
Tu as deux fois la clause WHERE dans ta requ�te.
Ensuite, si ton champ "id_bud_classe" est de type entier, remplace ta requ�te par :
Code:

1 2 3 4 5 $sql = "SELECT id_bud_categorie, libelle, id_bud_classe FROM t_bud_categorie WHERE id_bud_classe=".$param1." AND `id_trt` BETWEEN 1 AND 4 ORDER BY `libelle`";
Et si ton champ "id_bud_classe" est de type cha�ne, remplace ta requ�te par :
Code:

1 2 3 4 5 $sql = "SELECT id_bud_categorie, libelle, id_bud_classe FROM t_bud_categorie WHERE id_bud_classe=\"".$param1."\" AND `id_trt` BETWEEN 1 AND 4 ORDER BY `libelle`";

14/09/2006, 12h02
lodan
La requ�te est celle-ci :
Code:

1 2 3 4 5 6 7 SELECT id_bud_categorie, libelle, id_bud_classe FROM t_bud_categorie WHERE id_bud_classe = "1" AND `id_trt` BETWEEN 1 AND 4 ORDER BY `libelle`
Le r�sultat dans phpmyadmin est :
Code:

1 2 3 4 5 Textes complets id_bud_categorie libelle id_bud_classe Modifier Effacer 2 ALLOCATIONS CAF 1 Modifier Effacer 3 AUTRES RESSOURCES 1 Modifier Effacer 1 REVENUS DU TRAVAIL 1
Si je fais un print_r dans mon script, le r�sultat :

Code:

Array ( [0] => 2 [id_bud_categorie] => 2 [1] => ALLOCATIONS CAF [libelle] => ALLOCATIONS CAF [2] => 1 [id_bud_classe] => 1 ) ALLOCATIONS CAF ALLOCATIONS CAF

J'ai fait cela en supprimant le "while", parceque le programme partait en boucle, il a fallut que je l'arr�te.

Voir 40 message(s) de cette discussion en une page