IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Listes liées en cascade


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Listes liées en cascade
    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:
    1. un fichier contrôleur 'activities.php'
    2. un fichier vue 'formActivities.php'
    3. 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):
    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 2 (vue):
    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&nbsp;: 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>
    Fichier 3 (AJAX)
    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.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Bonjour,

    Si par exemple la liste naf2 est liée à naf1, le fichier 'ajaxNaf.php' doit donc exécuter une requête mysql et récupérer les données en fonction de la valeur de naf1, idem pour les listes 3 et 4..

    Quelle est la structure des tables 1 et 2 ? y'a t-il une relation entre les deux ?

Discussions similaires

  1. [2014] Colonnes liées en cascade, choix limité à des listes
    Par SpaceFrog dans le forum Développement Sharepoint
    Réponses: 1
    Dernier message: 13/03/2018, 10h19
  2. Listes déroulantes dynamiques/cascades & liées (avec données DB)
    Par lediz dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 25/04/2014, 10h16
  3. [MySQL] 1 table et 2 listes liées
    Par Ekik dans le forum PHP & Base de données
    Réponses: 11
    Dernier message: 07/02/2006, 16h47
  4. XMLHTTPRequest et listes liées
    Par ben23 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 31/12/2005, 16h32
  5. Problème avec listes liées entre elles et bouton "précé
    Par Oluha dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 02/08/2005, 15h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo