[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