Bonjour à tous,
En m'inspirant de cet exemple, je cherche à sélectionner une activité (d'après la nomenclature NAF de l'INSEE) à partir de 4 listes en cascade (section, division, groupe, classe respectivement issues de 4 tables naf1 à naf4).
J'ai une structure MVC avec:
- un fichier contrôleur 'activities.php'
- un fichier vue 'formActivities.php'
- un fichier de traitement AJAX 'customerActivitiesHandler.js'
L'ensemble est inclus dans un fichier père, lequel est également inclus dans un fichier grand-père mais je pense à priori que ceci ne devrait pas avoir d'influence sur ce qui suit.
Voici mon code pour le fichier 1 (contrôleur):Fichier 2 (vue):
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 <?php require_once('../classes/moimp/OptListSelect.php'); // crée une liste select require_once('../classes/moimp/OptListOption.php');// crée une option de liste select require_once('../config.php'); require_once('../functions.php'); require_once('../model/model.php'); use OptListSelect\OptListSelect; use OptListOption\OptListOption; $_SESSION['table'] = 'dat_activities'; $tabForm = 'formActivities.php'; $iCustomerId = (int) $_SESSION['customerId']; $language = $_SESSION['language']; $_SESSION['choices']= array_fill_keys(range(2,5),''); $choices[1] = $choices[2] = $choices[3] = $choices[4] = $choices[5] = ''; $pattern[1] = "<label for='naf1'>Section</label>%s<br>"; $pattern[2] = "<label for='naf2'>Division</label>%s<br>"; $pattern[3] = "<label for='naf3'>Groupe</label>%s<br>"; $pattern[4] = "<label for='naf4'>Classe</label>%s<br>"; $pattern[5] = "<label for='naf5'>Sous-classe</label>%s<br>"; $emptyOptionLabel = getDBText($language,16); // Variable to fill form '/frontend/views/$language/formActivities.php' $post = getActivities($iCustomerId); // get NAF-Elements $aNaf[1] = getNAFsection($language); // Section // Optionlist 'section' (niveau 1) $emptyOptionLabel = getDBText($language,16); // option '<choisir un élément>' $lstNaf[1] = new OptListSelect('naf[1]', ['id'=>'naf1', 'required'=>'required']); $lstNaf[1]->addOption(new OptListOption('', '', ['label'=>$emptyOptionLabel])); $sToSelect = !empty($_SESSION['naf1Selected']) ? $_SESSION['naf1Selected']: ''; if (!empty($aNaf[1])) { foreach($aNaf[1] as $aItem){ $aOptions = ($sToSelect == $aItem['code']) ? ['selected'=>'selected']: []; $lstNaf[1]->addOption(new OptListOption($aItem['id'], $aItem['code'].' - '.$aItem[$language.'_text'], $aOptions)); } unset($aItem); $choices[1] = sprintf($pattern[1], $lstNaf[1]); } // Other Optionlists for($i=2;$i<5;$i++){ $lstNaf[$i] = new OptListSelect("naf[$i]", ['id'=>"naf$i",]); $lstNaf[$i]->addOption(new OptListOption('', '', ['label'=>$emptyOptionLabel])); $choices[$i] = sprintf($pattern[$i], $lstNaf[$i]); } unset($i); $_SESSION['choices'] = $choices;Fichier 3 (AJAX)
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 <?php $choices = $_SESSION['choices']; ?> <form method="post" name="tabForm" action="<?= URL_SITE; ?>/frontend/mainFormHandler.php" data-tab="activity"> <input type="hidden" id="id0" name="id" value="<?= $post['id']; ?>" > <div class="formFlex"> <fieldset><legend>Activités répertoriées</legend> <p class="note"> Ici vous pouvez sélectionner des activités selon la nomenclature NAF de l'INSEE (rév. 2) ce qui peut vous permettre de rechercher les entreprises qui ont la même activité.<br> Ces codes sont indépendants de celui du registre du commerce. Ce sont ceux qui correpondent le mieux aux activités du client. </p> <fieldset><legend>Zone d'édition : Sélection d'une activité</legend> <?= $choices[1], $choices[2], $choices[3], $choices[4], $choices[5]; ?> </fieldset> </fieldset> </div> </form> <script type="module" src="../js/customerActivitiesHandler.js"></script>
Code js : 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 const nafs = document.querySelectorAll("[id*='naf']") ,root = window.location.origin ; console.log(nafs); // OK: 4 nodelist select nafs[2].disabled=false; function handleChange(lastList) { var xhr = new XMLHttpRequest() //,sel // remplacé par l'argument lastList ; //console.log(lastList.value); // 3 (pour section C) xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.responseText); //document.getElementById('xxxxxxxxxxxxxxxxxxxxxxxxxxxxx').innerHTML = xhr.responseText; } } xhr.open('POST', 'ajaxNaf.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode //sel = document.getElementById('yyyyyyyyyyyyyyyyyyyyyyyyyyyy'); } if (nafs.length){ nafs.forEach(function(curNaf, index){ curNaf.addEventListener('change', function(e){ handleChange(curNaf); }, false ); }); }
Je coince dans la fonction handleChange: je ne sais pas comment continuer.
Partager