[Ajax] pb avec 3 combos listes recupérant les infos via mysql

**laulaurent** · 31/05/2006, 17h19

Bonjour,

Je cherche à faire un système de 3 combos listes liées entre elles (themes, sous-themes, projets) et récupérant les infos dans trois tables mysql (proj_themes, proj_ssthemes et mod_projets). J'ai trouvé un certain nombre d'infos (pour ne pas dire de très nombreuses) sur le forum. J'arrive à faire marcher le tout pour 2 combos listes, mais la troisième me pose bien des problèmes.
J'arrive à faire marcher le système a 3 combos listes si les données sont dans des tableaux en bruts sur la page, mais avec des bdd, tout se complique.

J'ai procédé en mettant un onchange() sur la première combo liste qui crée la seconde combo liste dans un bloc div en faisant appel à un script php, lorsque l'événement se déclenche. Dans cette seconde combo liste, il y a également un onchange() qui est censé créer la troisième combo liste, mais étrangement, ce script ne s'exécute jamais.
J'ai l'impression que la cause de la non exécution de ce script est du au fait que au départ, l'appel à ce script, n'est pas sur la page, mais qu'il n'apparait qu'une fois que le premier script s'exécute.
J'ai cru comprendre qu'il fallait que j'ajoute des regexp et des eval peu après les innerHTML dans le code javascript. J'ai essayé mais sans succès.

Voici la partie du code concernée ($homepage -> atjs ajoute du code dans une balise <script language=...> et $homepage -> atc fait des "echo " sur la page pour résumer et faire court) :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
Sur la page php principale compterendu_assoc.php: 
		$homepage -> atjs ("
                        var xhr = null; 
 
                        function getXhr(){
                                if(window.XMLHttpRequest) // Firefox et autres
                                   xhr = new XMLHttpRequest(); 
                                else if(window.ActiveXObject){ // Internet Explorer 
                                   try {
                                        xhr = new ActiveXObject(\"Msxml2.XMLHTTP\");
                                    } catch (e) {
                                        xhr = new ActiveXObject(\"Microsoft.XMLHTTP\");
                                    }
                                }
                                else { // XMLHttpRequest non supporté par le navigateur 
                                   alert(\"Votre navigateur ne supporte pas les objets XMLHTTPRequest...\"); 
                                   xhr = false; 
                                } 
                        }
 
                        function gosstheme(){
                                getXhr();
                                // On défini ce qu'on va faire quand on aura la réponse
                                xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                leselect = xhr.responseText;
                                                // On se sert de innerHTML pour rajouter les options a la liste
                                                document.getElementById('ssthemes').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open(\"POST\",\"compterendu_assoc_sstheme.php\",true);
                                // ne pas oublier ça pour le post
                                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                // ne pas oublier de poster les arguments
                                // ici, l'id de l'auteur
                                sel = document.getElementById('themes');
                                idtheme = sel.options[sel.selectedIndex].value;
                                eval(xhr.send(\"idtheme=\"+idtheme));
                        }  
 
       						function goprojet(){
                                getXhr();
                                // On défini ce qu'on va faire quand on aura la réponse
                                xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                leselect = xhr.responseText;
                                                // On se sert de innerHTML pour rajouter les options a la liste
                                                document.getElementById('sssprojets').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open(\"POST\",\"compterendu_assoc_projet.php\",true);
                                // ne pas oublier ça pour le post
                                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                // ne pas oublier de poster les arguments
                                // ici, l'id de l'auteur
                                sel = document.getElementById('ssthemes');
                                idsstheme = sel.options[sel.selectedIndex].value;
                                eval(xhr.send(\"idsstheme=\"+idsstheme));
                        }                       
 
                ");
 
 
	$homepage -> atc ("<form action=\"compterendu_assoc.php?hopital=".$_GET['hopital']."&action=ajoutercr... name=\"mainForm\" id=\"mainForm\" method=\"post\">
		<label for=\"theme\" class=\"formlabel\">Th&egrave;me :</label>
		<select name='themes' id='themes' onchange='gosstheme()'>
		<option value='-1'></option>");
 
		$res=mysql_query("SELECT * FROM proj_themes ORDER BY nom");
		while($row = mysql_fetch_assoc($res)){
			$homepage -> atc ("<option value='".$row["id"]."'>".$row["nom"]."</option>");
		}
		$homepage -> atc ("
		</select>
 
		<label for=\"ssthemes\" class=\"formlabel\">Sous-th&egrave;me :</label>
		<div id='ssthemes'> 
			<select name='ssthemes' onchange='goprojet()'>
				<option value='-1'></option>
			</select>
		</div>
 
		<label for=\"projets\" class=\"formlabel\" >Nom du projet :</label>
		<div id='sssprojets'> 
			<select name='sssprojets'>
				<option value='-1'></option>
			</select>
		</div>
</form>");

Ensuite les deux scripts appelées par les fonction javascript gosstheme() et goprojet()
1- compterendu_assoc_sstheme.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
 
<?php
        echo "<select name='ssthemes' onchange='goprojet()'>";
        if(isset($_POST["idtheme"])){
                mysql_connect("localhost","root",$lemdp);
                mysql_select_db($labase);
                echo "<option value='-1'></option>";
                $res = mysql_query("SELECT id,nom FROM proj_ssthemes 
                        WHERE idtheme=".$_POST["idtheme"]." ORDER BY nom");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
                }
        }
        echo "</select>";
?>

2 - compterendu_assoc_projet.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
 
<?php
        echo "<select name='sssprojets'>";
        if(isset($_POST["idsstheme"])){
                mysql_connect("localhost","root",$lemdp);
                mysql_select_db($labase);
                echo "<option value='-1'></option>";
                $res = mysql_query("SELECT idprojet,nom FROM mod_projets 
                        WHERE idsoustheme=".$_POST["idsstheme"]." ORDER BY nom");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["idprojet"]."'>".$row["nom"]."</option>";
                }
        }
       echo "</select>";
?>

Je vois une alternative possible en modifiant les deux derniers scripts php. Il faudrait ajouter des "options" en fonction du résultat d'un requête à des objets select existants de la page principale. J'ai essayé mais sans succès car je ne vois pas comment faire référence à ces select situés sur la page principale depuis les petits scripts php.
Voici une ébauche de code qui ne fonctionne pas. Si quelqu'un sait comment corriger ca, ca serait super.(en gros la ligne avec le mainForm..., mainForm étant le name du formulaire dans l'autre page, et celle avec l'appel de la fonction javascript ajouter)

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
 
<?php
               if(isset($_POST["idtheme"])){
                mysql_connect("localhost","root",$lemdp);
                mysql_select_db($latable);
                echo "<SCRIPT LANGUAGE=\"JavaScript\">
                                                function ajouter(id,nom) {
                                                        var o=new Option(nom,id);
                                    mainForm.ssthemes.options[mainForm.ssthemes.options.length]=o;
                                                }";
                $res = mysql_query("SELECT id,nom FROM proj_ssthemes 
                        WHERE idtheme=".$_POST["idtheme"]." ORDER BY nom");
                while($row = mysql_fetch_assoc($res)){
                        echo "ajouter(".$row['id'].",".$row['nom'].");";
                }
                echo "</SCRIPT>";
        }
?>

Voila, j'espère ne rien avoir oublié afin que ca soit compréhensible. Tout aide est la bienvenue. Ca fait des heures que j'essaye de faire marcher cela.
Merci d'avance
Laurent
ps: je suis archi nul en javascript.

**FremyCompany** · 31/05/2006, 17h38

je n'ai pas tout compris mais :
1/ eval s'utilise sans les <script> etc. [ex : eval("alert('')")]
2/ on n'écript pas <SCRIPT LANGUAGE="JavaScript"> mais <script language="javascript" type="text/javascript">
3/ on utilise escape(idTheme) pour le transformer en argument valide pour URL

[Ajax] pb avec 3 combos listes recupérant les infos via mysql

JavaScript

Vue hybride

Discussions similaires

Partager

Partager