Listes imbriquées liées

**mel.cam12** · 10/04/2014, 09h33

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 sql :

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
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 html :

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
<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 javascript :

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
(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 :

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

**Dendrite** · 10/04/2014, 10h02

Bonjour,

Pour jquery, qui est un framework javascript, tu n'es pas au bon endroit.
Pour le PHP, je vois un problème dans tes bindParam : je te mets le code correct ci-dessous, repris des exemples du manuel PHP : tu ne types pas tes valeurs dans la requête SQL, mais dans chaque définition de tes bindParam, qui doivent être cohérents avec les types de tes champs dans ta base.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$calories = 150;
$couleur = 'rouge';
$sth = $dbh->prepare('SELECT nom, couleur, calories
    FROM fruit
    WHERE calories < :calories AND couleur = :couleur');
$sth->bindParam(':calories', $calories, PDO::PARAM_INT);
$sth->bindParam(':couleur', $couleur, PDO::PARAM_STR, 12);
$sth->execute();

**mel.cam12** · 10/04/2014, 10h16

D'accord ! Désolée du dérangement et merci pour le bindParam.

Bonne journée !

Listes imbriquées liées

jQuery

Discussions similaires

Partager

Partager