Listes imbriquées (liées) avec PHP/MySQL/jQuery

**mel.cam12** · 10/04/2014, 11h26

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

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

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
<?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'],PDO::PARAM_STR);
	$stmt->bindParam(':area', $_GET['research_areas'],PDO::PARAM_STR);
	$stmt->bindParam(':tissue',$_GET['tissue_types'],PDO::PARAM_STR);
} elseif ((isset($_GET['research_areas'])) && (isset($_GET['dataset']))) {
	$stmt = $conn->prepare("SELECT distinct TISSUE FROM :dataset WHERE STAGE=':area'");
	$stmt->bindParam(':dataset', $_GET['dataset'],PDO::PARAM_STR);
	$stmt->bindParam(':area', $_GET['research_areas'],PDO::PARAM_STR);
} 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'],PDO::PARAM_STR);
}
$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.

**SpaceFrog** · 10/04/2014, 11h34

il existe des plugins pour les listes liées ..;
par exemple http://www.appelsiini.net/2010/jquery-chained-selects

ha .. quoique, j'avais lu listes liées
je pense alors que c'est plutot ce type de plugin qui te conviendrait http://mjsarfatti.com/sandbox/nestedSortable/

Listes imbriquées (liées) avec PHP/MySQL/jQuery

jQuery

Discussions similaires

Partager

Partager