Listes imbriquées liées

Bonjour tout le monde,

cela fait maintenant quelques jours que je cherche une solution à mon problème donc je me permet de l'exposer ici. Donc je cherche à créer des listes déroulantes imbriquées (la première induits les choix de la seconde et ainsi dessuite), dont les différents choix proviennent d'une base de données. Pour cela j'ai cherché un peu partout sur le web comment en géénral les développeurs s'y prennaient pour réaliser ceci et la solution d'utiliser la librairie jQuery m'a semblé être le plus simple. La première liste se déroule bien, c'est la liste de toutes les tables que j'ai dans la base de données, mais ensuite en sélectionnant rien ne se passe et je n'arrive pas à savoir pourquoi.

Voici le schéma de l'une des tables pour exemple :

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
CREATE TABLE IF NOT EXISTS `Pathogene_Serie` (
  `IDSAMPLE` int(11) NOT NULL AUTO_INCREMENT,
  `IDGENE_AT` varchar(45) NOT NULL,
  `NAME_GENE` longtext NOT NULL,
  `SAMPLE_NAME` longtext NOT NULL,
  `STAGE` longtext NOT NULL,
  `TISSUE` text NOT NULL,
  `AGE` float NOT NULL,
  `CONTROL` text NOT NULL,
  `MUTANT` text NOT NULL,
  `TIMECOURSE` float NOT NULL,
  `INTENSITY_VALUE` float NOT NULL,
  `ID_MEAN_REP` int(11) NOT NULL,
  PRIMARY KEY (`IDSAMPLE`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=25788 ;
 
--
-- Contenu de la table `Pathogene_Serie`
--
 
INSERT INTO `Pathogene_Serie` (`IDSAMPLE`, `IDGENE_AT`, `NAME_GENE`, `SAMPLE_NAME`, `STAGE`, `TISSUE`, `AGE`, `CONTROL`, `MUTANT`, `TIMECOURSE`, `INTENSITY_VALUE`, `ID_MEAN_REP`) VALUES
(1, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'JD.AT.EO.COL.WT.12H.UNINFECTED_Eo.C.012..ATGE_ExpID_169.', 'Response to Erysiphe orontii infection', 'leaf', 3.7, 'Yes', 'WT Col-0', 12, 1225.02, 1),
(2, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'X2788_Psy.ES4326.24..ATGE_ExpID_168.', 'Pseudomonas half leaf injection', 'leaf', 3.7, 'No', 'WT Col-0', 24, 621.46, 2),
(3, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'X2789_Psy.C2.16..ATGE_ExpID_168.', 'Pseudomonas half leaf injection', 'leaf', 3.7, 'Yes', 'WT Col-0', 16, 627.76, 3),
(4, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'AtGen_A.61_35.1_REP1_ATH1_Psy.C.24..ATGE_ExpID_120.', 'Response to virulent, avirulent, typeIII-secretion system deficient and nonhost bacteria', 'leaf', 3.7, 'Yes', 'WT Col-0', 24, 1168.6, 4),
(5, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'GSM554315_WT_Emwa1_6dpi_rep2_GSM554315_WT_Emwa1_6dpi_rep2..ATGE_ExpID_GEO.GSE22274.', 'Timing of plant immune responses by a central circadian regulator', 'seedling', 1.03, 'No', 'WT', 144, 607.946, 5),
(6, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'AtGen_A.33_28.1_REP1_ATH1_Psy.DC3000hrcC.06..ATGE_ExpID_120.', 'Response to virulent, avirulent, typeIII-secretion system deficient and nonhost bacteria', 'leaf', 3.7, 'No', '[hrcC]', 6, 633.2, 6),
(7, 'At3g03670', '259197_at| Peroxidase superfamily protein|', 'AtGen_B.42_3.7.4_REP3_ATH1_Elicitor.LPS.4..ATGE_ExpID_122.', 'Response to bacterial and oomycete derived elicitors', 'leaf', 3.7, 'No', 'WT Col-0', 4, 1686.2, 7);

La partie de la page html avec le code javascript :

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
<b>Data's selection :</b>
			<select name='dataset' id='dataset'  >
				<option value="datasets">-- Datasets --</option>
 
                         <br></br>
			<b>Research Area(s) : </b>
				<select id="research_areas" name= "research_areas"   >
					<option value="categories">--Categories--</option>
 
				</select>
			</br>
			</br>
			<b>Tissue Type(s) :</b>
				<select  id='tissue_types' name= 'tissue_types' >
					<option value="tissues">--Tissues--</option>
 
				</select>
 
			</br>
			</br>
			<b>Growth Stage(s) :</b>
				<select id='growth_stages' name='growth_stages' >
					<option value="ages">--Ages--</option>
 
				</select>
 
 
<script type="text/javascript" src="jquery.list.js"></script>
<script type="text/javascript">
                                
                                //<![CDATA[
                                        $(function() {
                                                $.list.init();
                                        });
</script>

Le code jQuery qui est mon fichier jquery.list.js

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
46
47
48
(function($) {
    $.list = {
        file: 'request.php',
            setData: 'go',
            id: 'dataset',
            title: null,
 
            init: function() {
                $.list.getList();
                $('#dataset').on('change', function() {
				console.log(this);
                $.list.setData = 'dataset='+$(this).val();
                $.list.id = 'research_areas';
                $.list.title = 'Categories';
                $.list.getList();
                $('#research_areas').html('<option value="categories">--Categories--</option>');
 
 
            });
            $('#research_areas').on('change', function() {
 
                $.list.setData = 'research_areas='+$(this).val();
                $.list.id = 'tissue_types';
                $.list.title = 'Tissues';
                $.list.getList();
                $('#tissue_types').html('<option value="tissues">--Tissues--</option>');
            });
        },
 
        getList: function() {
            $.ajax({
                url: $.list.file,
                data: $.list.setData,
                dataType: 'json',
                success: function(json) {
                    if (!!$.list.title) {
                        $('select#'+$.list.id).html('');
                        $('#'+$.list.id).append('<option value="'+$.list.title+'">--'+$.list.title+'--</option>');
                    }
                    $.each(json, function(index, value) {
                        $('#'+$.list.id).append('<option value="'+value+'">'+value+'</option>');
                    });
 
				}
            });
        }
    }
})(jQuery);

Le code php/MySQL qui génère les sorties, c'est le fichier request.php :

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
<?php
 
 
try {
        
        $conn = new PDO('mysql:host=localhost;dbname=mydb', 'user', 'password');
} catch(Exception $e) {
                exit('Impossible de se connecter à la base de données.');
        }
        
        
        if ((isset($_GET['tissue_types'])) && (isset($_GET['dataset'])) && (isset($_GET['research_areas']))) {
            $stmt = $conn->prepare("SELECT distinct AGE FROM :dataset WHERE STAGE=':area' and TISSUE=':tissue'");
            $stmt->bindParam(':dataset', $_GET['dataset']);
            $stmt->bindParam(':area', $_GET['research_areas']);
            $stmt->bindParam(':tissue',$_GET['tissue_types']);
        } elseif ((isset($_GET['research_areas'])) && (isset($_GET['dataset']))) {
            $stmt = $conn->prepare("SELECT distinct TISSUE FROM :dataset WHERE STAGE=':area'");
            $stmt->bindParam(':dataset', $_GET['dataset']);
            $stmt->bindParam(':area', $_GET['research_areas']);
        } elseif (isset($_GET['go'])) {
            $stmt = $conn->prepare("SHOW TABLES");
        } elseif (isset($_GET['dataset'])) {
            $stmt = $conn->prepare("SELECT distinct STAGE FROM :dataset  ");
            $stmt->bindParam(':dataset', $_GET['dataset']);
        }
        $stmt->execute();
        
        $json = array(); 
        while ($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT)){
                if($row[0]!='Summary_Tables' && $row[0]!='Processed_Data_Table') {
                        $json[$row[0]] = utf8_encode($row[0]);
                }
        }
        
        echo json_encode($json);
?>

Et si des informations manquent faitez-le moi savoir.
Je vous remercie en avance pour votre considération !

Bonne journée,

Mél.