Chargement de dropdown dynamique

**AntoninP** · 28/08/2017, 10h49

Bonjour,

J'ai réalisé une appli web qui me permet de remplir des dropdown à partir d'un CSV pour ensuite être imprimé. Tout fonctionne, mais par souci d’ergonomie j'aimerai que mes dropdown se remplissent en fonction des choix précédents.

Dois-je forcément passer par un/des tables SQL ? Ou ça reste faisable directement depuis le CSV ?

J'ai suivi : ce tuto que je n'ai pas réussi à faire fonctionner et qui utilise 3 tables SQL, ce qui ne m'arrange pas

Ca fait quelques jours que je bloque là dessus, auriez-vous des pistes vers lesquelles je pourrais m'orienter ?

Merci beaucoup

**LearningBoy** · 28/08/2017, 11h51

Bonjour AntoninP,

Ce que tu essayes de faire est possible avec des CSV si tu as les bonnes informations.

Est-ce que tu aurais un peu plus d'infos pour que l'on puisse t'aider : combien de dropdown ? utilises-tu jQuery ou non ? etc.

Cordialement.

**AntoninP** · 28/08/2017, 13h10

Salut LearningBoy,

Mon CSV est de cette forme :

"N°","Nom","Lieu"
"1","nom1","Terre"
"1","nom1","Mars"
"1","nom2","Lune"
"2","nom3","Lune

"

donc 3 dropdown.

Voici mon code, assez basique :

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
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
<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="utf-8" />
 
        <title>Index</title>
 
    </head>
 
    <body>
 
			<?php 
                                
                                        $fichier = "monFichier.csv";                    //Changer pour vrai chemin
                                        $fp = fopen($fichier, "r");
                                        if ($fichier<>false) {                                                                          //Ajouter une erreur si fichier non trouvé
                                                flock ($fp, LOCK_SH);
                                                while (($data = fgetcsv($fp, 1000, ';')) !== FALSE){
                                                        $data = array_map("utf8_encode", $data);                        //Règle les problèmes de caractères spéciaux
                                                        $uf[] = $data[0];
                                                        $libelle[] = $data[1];
                                                        $livraison[] = $data[2];
                                                }
                        
                                                flock($fp, LOCK_UN);
                                                fclose($fp);
 
                                        }
                                        
                                        $liste_uf = array_unique($uf);
                                        $liste_libelle = array_unique($libelle);
                                        $liste_livraison = array_unique($livraison);
                                        
                        ?>
 
 
 
			<form action="impression.php" method="post">
 
				<div>
				UF : <select name = "uf">
				<?php
                                        foreach ($liste_uf as $uf){
                                                echo "<option value=$uf>".$uf."</option>\n";
                                        
                                        }               
                                        
                                ?>
				</select>
				</div>
				</br>
 
 
				<div>
				Libellé : <select name = "libelle">
				<?php
                                        foreach ($liste_libelle as $libelle){
                                                echo "<option value=$libelle>".$libelle."</option>\n";
                                        }                       
                                ?>
				</select>
				</div>
				</br>
 
 
				<div>				
				Livraison : <select name = "livraison">
				<?php
                                        foreach ($liste_livraison as $livraison){
                                                echo "<option value=$livraison>".$livraison."</option>\n";
                                        }                       
                                ?>
				</select>
				</div>
				</br>
 
				<input type="submit" value="Valider"/>
 
			</form>
 
    </body>
 
</html>

donc pas de jQuery pour l'instant dans le code qui fonctionne. J'ai essayé d'ajouter des conditions dans les affichages des valeurs des dropdown "libellé" et "livraison" mais je ne pense pas qu'il soit possible de manipuler les valeurs d'un CSV de cette façon.

Par contre je suis en train d'essayer de contourner un peu le problème en utilisant la fonction autocomplete de javascript qui nécessite du jQuery, en transformant le csv en json. Mais les utilisateurs sont habitués au dropdown donc je ne préfère pas changer si possible.

**NoSmoking** · 29/08/2017, 17h04

Bonjour,

... mais par souci d’ergonomie j'aimerai que mes dropdown se remplissent en fonction des choix précédents.

tu peux t'inspirer de : Créer des listes déroulantes liées entre elles sans utiliser Ajax

**AntoninP** · 30/08/2017, 10h10

Salut NoSmoking,

Grâce à tes conseils et quelques scripts que j'ai trouvé en continuant mes recherches j'arrive à avoir quelque chose de fonctionnel.

Voici mon code :

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
 
<!doctype html>
<html>
 
<head>
 
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css">
    <title>Index</title>
 
</head>
 
<body>
 
	<?php 
                                
                $fichier = "monFichier.csv";                    //Changer pour vrai chemin
                $fp = fopen($fichier, "r");
                if ($fichier<>false) {                                                                          //Ajouter une erreur si fichier non trouvé
                        flock ($fp, LOCK_SH);
                        while (($data = fgetcsv($fp, 1000, ',')) !== FALSE){
                                $data = array_map("utf8_encode", $data);                        //Règle les problèmes de caractères spéciaux
                                $uf[] = $data[0];
                                $libelle[] = $data[1];
                                $livraison[] = $data[2];
                        }
                        flock($fp, LOCK_UN);
                        fclose($fp);
                }
                                        
                $liste_uf = array_unique($uf);                                                          //Supprime les doublons dans les dropdown
                $liste_libelle = array_unique($libelle);
                $liste_livraison = array_unique($livraison);
                                        
        ?>
 
	<div class="align">
 
 
	<form action="impression.php" method="post">
 
 
        UF : 
        <select class="form-control" name="UF" id="UF"/>
        <?php
                        foreach ($liste_uf as $uf){
                                echo "<option value='$uf'>".$uf."</option>\n"; 
                        }                                       
                ?>
 
 
 
        </select>
 
 
 
		Libellé : 
		<input type="text" name="Libelle" id="Libelle" class="form-control" />
 
 
        Livraison : 
        <input type="text" name="Livraison" id="Livraison" class="form-control" />
 
		</br>
		</br>
		</br>
		</br>
      <input type="submit" class="button" value="Valider"/>
    </form>
</div>
 
<script src="http://code.jquery.com/jquery.js"></script>
 
<script>															//
$(function() {
  $('#UF').change(function() {
    $.ajax({
      url: 'getValue.php',
      data: {
        search: $(this).val()
      },
      type: 'GET',
      dataType: 'JSON'
    }).done(function(resp) {
      if (resp) {
        for(var i in resp) {
          $('#' + i).val(resp[i]);
        }
      }
    });
  });
});
</script>
</body>
</html>

et pour getValue.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
 
<?php
$file = fopen('monFichier.csv', 'rt');
$headers = fgetcsv($file);
$search = isset($_GET['search']) ? $_GET['search'] : false;
$result = false;
if ($search) {
        while($row = fgetcsv($file)) {
          $row= array_map("utf8_encode", $row);
          if ($row[0] == $search) {
                $result = new stdClass;
        foreach($row as $i => $r) {
                        $result->{$headers[$i]} = $r;
                }
                break;
          }
        }
}
die(json_encode($result));              
?>

Ce qui me gène un peu c'est que le script et le code de getValue.php ne viennent pas de moi et j'ai un peu de mal à comprendre leur fonctionnement. Ca marche mais je préfère quand même me pencher là dessus histoire de ne pas être perdu si on me demande des modifs.

Il me reste juste un problème à régler, le fait qu'une valeur de mon dropdown peut donner des résultats différents par la suite.
Par exemple dans mon CSV je peux avoir :

Code :

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

1
2
3
4
5
6
 
0217,OFFICE RELAIS N° 3,N.H 3EME ETAGE
0217,OFFICE RELAIS N° 4,N.H 4ÉME ETAGE
0217,OFFICE RELAIS N° 5,N.H 5ÉME ETAGE
0217,OFFICE RELAIS N° 6,N.H 6EME ETAGE
0217,OFFICE RELAIS N° 7,N.H 7ÉME ETAGE

Je vais continuer de me creuser la tête, je vais aussi demander si je peux renommer les doublons en "0217a", "0217b", "0217c",... par exemple ce qui me permettrait de contourner le problème

**AntoninP** · 30/08/2017, 14h46

Solution trouvée, je passe le sujet en résolu.

Pour info j'ai contourné le problème en utilisant bien ma méthode "0217a", "0217b", "0217c",... dans le CSV et dans le dropdown, puis sur ma page d'impression j'ai juste gardé les 4 premiers caractères quand la chaîne était trop longue.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="uf">
	N° UF: 
	<span class="result-uf">
	<?php 
                if (strlen($_POST['UF'])>4){
                        echo substr($_POST['UF'],0,4);
                }
                else{
                        echo $_POST['UF'];
                }
        ?>
	</span>
</div>

Chargement de dropdown dynamique

AJAX

Discussions similaires

Partager

Partager