[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