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

[AJAX] enchainement de script ajax sur <select>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager