[AJAX] enchainement de script ajax sur <select>

**lodan** · 12/09/2006, 09h46

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

**Bisûnûrs** · 12/09/2006, 09h54

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

**rieppe** · 12/09/2006, 10h41

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é

**lodan** · 12/09/2006, 10h57

BisounoursJos, tu as gagné c'est tout à fait ça et en plus je vais trouver des pneus pour ma caisse à savon

**lodan** · 12/09/2006, 10h59

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 ?

**Bisûnûrs** · 12/09/2006, 12h00

@lodan : Tu peux gérer ça en trois fichiers :

Fichier contenant les <select> (index.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
<?
$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 :

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

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 :

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

**lodan** · 12/09/2006, 13h37

Merci BisounoursJos,

Qu'appels-tu param1, param2 ?

**Bisûnûrs** · 12/09/2006, 13h45

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

Je rajouterais tout en haut à ce fichier :

Code :

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

1
2
3
if(!isset($param1)) $param1="";
if(!isset($param2)) $param2="";
// ETC

Et donc dans la requête tu peux avoir :

Code :

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

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

**lodan** · 12/09/2006, 13h49

J'ai mis :

Code :

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

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

**lodan** · 12/09/2006, 15h45

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.

**Bisûnûrs** · 12/09/2006, 15h52

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

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

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

**lodan** · 14/09/2006, 09h58

Bonjour Docteur BisounoursJos,

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

Code :

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

xmlhttp.responseXML has no properties

portant sur la ligne

Code :

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

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

Voici le html

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

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

**Bisûnûrs** · 14/09/2006, 10h06

@lodan : Sur ta ligne :

Code :

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

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

**lodan** · 14/09/2006, 10h26

heu !!!!

Voivi le xml que j'ai fait :

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

**Bisûnûrs** · 14/09/2006, 10h38

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 :

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

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

ce morceau :

Code :

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

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 :

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

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

et non :

Code :

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

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

?

**lodan** · 14/09/2006, 10h58

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 :

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

**Bisûnûrs** · 14/09/2006, 11h09

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

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 ?

**lodan** · 14/09/2006, 11h14

J'ai l'erreur suivante

Code :

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

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

**Bisûnûrs** · 14/09/2006, 11h19

Code :

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

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 :

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

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 :

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

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

**lodan** · 14/09/2006, 12h02

La requête est celle-ci :

Code :

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

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 :

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

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 :

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

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.

[AJAX] enchainement de script ajax sur <select>

JavaScript

Discussions similaires

Partager

Partager