[AJAX] enchainement de script ajax sur <select>

Pour le 1er enregistrement de chaque catégorie ou sous-catégorie, j'ai simplement contourné le problème en créant un enregistrement dans mes tables avec un libellé "----------------" et ça marche. Bien sur à l'utilisateur de ne pas choisir celui là, mais cela je vais le contrôler.

Bon allez voilà ce qui fonctionne :

Objectif enchaîner 3 select dépendant l'un de l'autre du 1er au dernier.

Dans notre exemple, nous avons des classes, des catégories et des sous-catégories.

Nous sommes dans une configuration de process où la modification des informations provenant d'une table existe.

Nous utilisons PHP, HTML le tout avec SMARTY et la base de données est Mysql. Mais ne vous inquiétez pas, si vous ne connaissez pas, vous trouverez facilement comment remplacer cela par du PHP et de l'echo.

Maintenant passons au code HTML :

Le formulaire html :

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
div>
		<select name="bud_classe" id="bud_classe" onChange="goCategorie(document.getElementById('bud_classe'))" 
		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="1">
  	 	<option value="-1"></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(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			<option value="-1">Choisir une classe</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>
		</div>
		<div>
	  		{if $budget.bud_ss_categorie!=""}
	  		<select name="bud_ss_categorie" id="bud_ss_categorie"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_ss_categorie}">{$budget.bud_ss_categorie|getSsCategorie}</option>
			{else}
			<select name="bud_ss_categorie" id="bud_ss_categorie" 
			onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une catégorie</option>
			{/if}		
		</select>

les javascript, 1 pour la recherche de la catégorie et 1 pour la sous catégorie

Catégorie :

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;
 
   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.value,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('bud_categorie');
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_categorie').options.length > 0){
         document.getElementById('bud_categorie').removeChild(document.getElementById('bud_categorie').options[0]);
      } 			
 
      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;
   }
}

La sous catégorie (tient c'est presque le même)

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
<script type='text/javascript' language='Javascript' >
function goSsCategorie(param1){
   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', '../ajax/ajaxSsCategorie.php?param1='+param1.value,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('bud_ss_categorie');
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_ss_categorie').options.length > 0){
         document.getElementById('bud_ss_categorie').removeChild(document.getElementById('bud_ss_categorie').options[0]);
      } 			
 
      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;
   }
}
</script>

Et maintenant les 2 scripts xml

Catégorie

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
header('Content-Type: text/xml; charset=ISO-8859-1');
 
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." AND id_trt BETWEEN 1 AND 4 ORDER BY libelle";
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
 
while($val=mysql_fetch_array($req))
{
   $inf .= "<balise1>".$val["libelle"]."</balise1>\n";
   $inf .= "<balise2>".$val["id_bud_categorie"]."</balise2>\n";
   // ETC
}
$inf .= "</racine>";
print $inf;

Sous-catégorie

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
header('Content-Type: text/xml; charset=ISO-8859-1');
 
if(!isset($param1)) $param1="";
 
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
 
$sql = "SELECT id_bud_ss_cat, libelle, id_bud_cat	FROM t_bud_ss_categorie WHERE id_bud_cat=".$param1." AND id_trt BETWEEN 1 AND 4 ORDER BY libelle";
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
 
while($val=mysql_fetch_array($req))
{
   $inf .= "<balise1>".$val["libelle"]."</balise1>\n";
   $inf .= "<balise2>".$val["id_bud_ss_cat"]."</balise2>\n";
   // ETC
}
$inf .= "</racine>";
print $inf;

N'oubliez pas votre connexion à la base de données et de faire le reste.

Ah ! J'oubliai, vous pouvez (devez) améliorer ce code selon votre niveau, pour moi sans BisounoursJos et 48 heures de sa patience, ce post n'existerai pas.

Alors n'oubliez pas de le remercier si son contenu vous a intéressé même partiellement.

A bientôt.

Bon, il nous restait un petit soucis lorsque le select n'avait qu'une réponse, vous aviez beau cliquez dessus, il ne se passait rien.

Donc voici une solution :

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
header('Content-Type: text/xml; charset=ISO-8859-1');
 
if(!isset($param1)) $param1="";
 
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
$initlib="-------Choisissez la personne------";
$initkey="-1";
$sql = "SELECT id_maj_tiers, t_tiers.id_tiers,id_contact, id_civilite, contact_nom, contact_prenom
		FROM ".$prefixe_table."maj_tiers
		LEFT OUTER JOIN ".$prefixe_table."t_tiers ON ".$prefixe_table."maj_tiers.id_tiers=".$prefixe_table."t_tiers.id_tiers
		LEFT OUTER JOIN ".$prefixe_table."t_tiers_contacts ON ".$prefixe_table."t_tiers.id_tiers=".$prefixe_table."t_tiers_contacts.id_tiers
		WHERE id_maj_tiers=".$param1."
		AND maj_tiers.id_trt >0
		AND maj_tiers.id_trt <5
		ORDER BY contact_nom";
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
$inf .= "<balise1>".$initlib."</balise1>\n";
$inf .= "<balise2>".$initkey."</balise2>\n";
while($val=mysql_fetch_array($req))
{
   $civilite=getCivilite($val["id_civilite"]);
   $inf .= "<balise1>".$civilite." ".$val["contact_nom"]." ".$val["contact_prenom"]."</balise1>\n";
   $inf .= "<balise2>".$val["id_contact"]."</balise2>\n";
   // ETC
}
$inf .= "</racine>";
print $inf;

La solution que j'utilise c'est $initlib et $initkey.

Allez à plus tard.