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

JavaScript Discussion :

[Débutant]Chargement/affichages dynamiques de combos en fonction d'une autre combo


Sujet :

JavaScript

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    481
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 481
    Points : 165
    Points
    165
    Par défaut [Débutant]Chargement/affichages dynamiques de combos en fonction d'une autre combo
    Bonjour,

    Je suis assez débutant en programmation Web et je souhaiterais aujourd'hui réaliser (c'est aussi une chose que l'on m'a demandé), l'affichage d'une première combo et d'une série d'autres.

    Le but est de tout avoir chargé en une seule fois en n'affichant au départ que la première combo. Ensuite en fonction de la sélection effectuée dans cette première combo, j'aimerais afficher l'une ou l'autre des combos.

    Par exemple (gestion d'une cave de vins) :
    1) Dans une première combo, je sélectionne un vignoble,
    2) J'ai chargé dans chaque combo les châteaux regroupés par vignoble mais sans les afficher dans un premier temps,
    3) J'affiche que les châteaux qui font partie du vignoble sélectionné dans la seconde combo.

    Pensez vous que ça soit possible. Dans un premier temp, je pense qu'on peut voir ça en dur et ensuite, je poserais la même chose avec Javascript et pourquoi pas avec une base de données.

    Je précise que je suis assez débutant en DHML/Javascript, d'où la difficulté pour moi dans cet environnement de développement.

    A plus tard et merci d'avance pour vos réponses.

    Marco.

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    avant de voir plus précisément, il y aurait 2 solutions :
    • soit créer toutes les combo potentielles à la génération de la page, puis n'afficher que celle souhaitée lors de la sélection dans la 1° combo
    • soit ne créer qu'une combo, et ne l'alimenter qu'avec les données souhaitées (stockées en tableaux JS, générés à la création de la page), en fonction de la sélection dans la 1° combo.

    Tu sembles parti sur la 1° solution : y a t-il une raison ?

    Il y a une 3° solution (intéressante si le volume de données à l'intérieur des combo potentielles est important) : Ajax.

    Tu trouveras de toutes façons des pistes ici

    A+

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    481
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 481
    Points : 165
    Points
    165
    Par défaut
    Bonjour,

    Tout d'abord bonne et heureuse année.

    Merci pour cette réponse aussi rapide.

    En fait mon problème est un peut comme ces poupées russes (ou comme le klug : ça paraît épais vu de dehors et en plus il y a une deuxième couche à l'intérieur ).

    La deuxième couche c'est que dans l'idée de la personne qui m'a donné cet "exercice" pour que je me fasse les dents dessus, il y avait un accès à une base de données via ASP (c'est aussi pour ça que j'ai hésité à le mettre soit dans le forum Javascript, soit dans DHTML). Remarque on peut aussi créer une discussion et la continuer ensuite ailleurs en mettant un lien entre les deux...

    Étant débutant j'ai préféré laisser de côté cet aspect au moins pour pour initialiser la discussion.

    En fait la première solution est celle qui m'a été présentée par ce collègue de travail. Ceci dit, ça ne veut pas dire qu'il s'agisse de la meilleure solution et je suis preneur de toutes les bonne idées.

    La seconde solution qui revenait à alimenter "à demande" une seconde combo m'avait été déconseillée par mon collègue car il me disait que cela nécessitait de refaire une requête pour l'alimenter (et donc que ça amenait des pertes de temps), mais je n'avais pas évoqué cet aspect dans mon message de départ (par souci de simplification).

    Le fait de tout charger dans un tableau en premier est sans doute intéressant... Par contre quelle est la dimension maximum d'un tableau ? Ensuite apparemment on peut redimensionner dynamiquement un tableau en Javascript. Mais est-ce toujours valable si le volume d'informations est important ?

    Pour ce qui est de la solution Ajax (troisième solution), j'avoue que ne connaissant pas la technologie, j'ai pour le moment un peut de mal à l'envisager.

    Par avance je te remercies.

    Marco.

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par cotmar Voir le message
    La seconde solution qui revenait à alimenter "à demande" une seconde combo m'avait été déconseillée par mon collègue car il me disait que cela nécessitait de refaire une requête pour l'alimenter (et donc que ça amenait des pertes de temps),
    Heu ... non
    Pas de la manière que j'évoquais : dans ce cas, les requêtes lancées lors de la génération de la page sont strictement les même (en nombre et volume) que pour la 1° solution. Sauf que dans ce cas le résultat est récupéré dans un tableau JS (qui servira à alimenter la 2° combo à la demande sur le poste client), et non directement dans les différentes combo prévues).

    Citation Envoyé par cotmar Voir le message
    Le fait de tout charger dans un tableau en premier est sans doute intéressant... Par contre quelle est la dimension maximum d'un tableau ? Ensuite apparemment on peut redimensionner dynamiquement un tableau en Javascript. Mais est-ce toujours valable si le volume d'informations est important ?
    Si tu te poses ces questions de volumes, je te conseilles très fortement de t'intéresser au lien Ajax que je t'ai donné (ainsi qu'aux autres tutos Ajax) : dans ce cas là ton collègue a raison (c'est sûrement à cette solution qu'il pensait) : à chaque choix dans la 1° combo, une nouvelle requête sera envoyé au serveur (qui fera le lien avec la BDD).
    Par contre, l'efficacité d'AJAX (en terme de temps de réponse) fait que ces requêtes supplémentaires ne seront absolument pas pénalisantes (ou alors c'est que la génération de la page pour les 2 solutions précédentes sera encore plus dramatique ).

    Pour ce genre de problème, lorsque du volume est en jeu, essayer Ajax c'est l'adopter
    Il te faudra alors lutter contre un nouveau problème : ne pas utiliser Ajax là où il est inutile, ce qui est très à la mode

    A+

  5. #5
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    481
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 481
    Points : 165
    Points
    165
    Par défaut
    Salut,

    Merci de ta réponse.

    Voici donc ce que j'essaye de faire.

    Tu peux me dire ce que tu en penses s'il te plait ?
    Par avance merci.

    Marco.


    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
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
     
     
     
     
    <%@  Language=JavaScript %>
    <%Response.Expires=0;%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>V&eacute;rifier les saisies de formulaire</title>
    </head>
     
    <body>
     
        <h1>Sélection des secteurs</h1>
     
        <form 
            id="FrmSelection"
            name="FrmSelection"
            method="post"
        >
    <!--#INCLUDE VIRTUAL="/Sources/Includes/Connect.asp"-->
    <!--#INCLUDE VIRTUAL="/Sources/Includes/http.asp"-->
     
    <%
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction              :   FctChargeRequeteEnTableau
    //Objet                 :   Création d'un tableau dynamique 
    //Type                  :   Serveur (Base de données/HTML)
    //Paramètres            :
    //  - StrSql1           :   Chaîne SQL
    //  - StrFl             :   Profil
    //  - StrFv             :   Champs visible (affiché)
    //  - StrFi             :   Champs invisibles (index)
    //  - ArrResultat       :   Tableau contenant les valeurs à afficher
    //Retourne              :   Le tableau contenant les valeurs renvoyées par la requête
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    function FctChargeRequeteEnTableau(StrSql1, StrFl, StrFv, StrFi){
    var rs = ExecuteSqlServer_Client(StrFl, StrSql1);
    var IntCpt=0;
    var ArrResultat=new Array;
     
        while (!rs.BOF && !rs.EOF)
        {
          IntCpt++;
          ArrResultat=new Array[1][IntCpt];
          ArrResultat(0, IntCpt) = rs.Fields(StrFi);
          ArrResultat(1, IntCpt) = rs.Fields(StrFv);
    	    rs.MoveNext();
        }
        return ArrResultat;
        rs.close();  
    }
     
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction              :   FctRempliSecondSelect
    //Objet                 :   remplissage de la seconde combo
    //Type                  :   Client/Interface
    //Paramètres            :
    //  - StrListe          :   Nom de la combo à remplir
    //  - StrLibelle        :   Libellé de l'élément à remettre à zéro
    //Retourne              :   Néant
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    function FctRempliSecondSelect(StrListe, StrChoix){
        FctRaz(StrListe);
        document.FrmSelection.elements[StrListe].options[IntCpt]=StrChoix;
     
        for (IntCpt=0; IntCpt<ville[StrChoix].length; IntCpt++){
           new_option = new Option(document.FrmSelection.elements[StrListe][StrChoix][IntCpt][1],document.FrmSelection.elements[StrListe][StrChoix][IntCpt][0]);
           document.FrmSelection.elements[StrListe].options[document.FrmSelection.elements[StrListe].length]=new_option;
        }
    }
     
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction              :   FctRazSelect
    //Objet                 :   Vide la combo sélectionnée 
    //Type                  :   Client/Interface
    //Paramètres            :
    //  - StrLibelle        :   Libellé de l'élément à remettre à zéro
    //Retourne              :   Néant
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    function FctRazSelect(StrLibelle){
    var IntLongueur=document.formu.elements[StrListe].length;
     
      for (IntCpt=IntLongueur; IntCpt>=0; IntCpt--)
         document.FrmSelection.elements[StrListe].options[IntCpt]=null;
    }
     
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction              :   FctRemplirCombo
    //Objet                 :   Création d'une combo dynamiquement 
    //Type                  :   Serveur (Base de données/HTML)
    //Paramètres            :
    //  - StrId             :   Identifiant de la combo
    //  - StrSql1           :   Chaîne SQL
    //  - StrFl             :   Profil
    //  - StrFv             :   Champs visible (affiché)
    //  - StrFi             :   Champs invisibles (index)
    //  - StrDefaultValue   :   Valeur par défaut
    //Retourne              :   Chaîne HTML de création de la combo
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    function FctRemplirCombo(StrId, StrSql1, StrFl, StrFv, StrFi, StrDefaultValue)
    {
    var StrHtml='<select id="' + StrId + '" name="' + StrId + '" onchange="FrmSelection.submit()";>';
    var rs = ExecuteSqlServer_Client(StrFl, StrSql1);
     
        while (!rs.BOF && !rs.EOF)
        {
            StrHtml += '<option value= "' + rs.Fields(StrFi) + '">' + rs.Fields(StrFv);
            if (String(rs.fields(StrFv))==StrDefaultValue) StrHtml+=" Selected";
            StrHtml+=' </option>';
    	    rs.MoveNext();
        }
        StrHtml+='</select>';    	
        rs.close();
        Response.Write(StrHtml);
    }
     
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction      :   FctListeCombo
    //Objet         :   Valeurs retournées sur la page HTML lors de la sélection d'une catégorie dans la combo
    //Type          :   Serveur (Base de données/HTML)
    //Paramètres    :
    //Résultat      :   Informations sur l'écran
    //Retourne      :   Néan
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
     
    TestEnveloppeHTTP();
     
    <%
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    //Fonction      :   main
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    var StrSQL ="SELECT [SECTEUR_CODE], [SECTEUR_LIBELLE] FROM [SECTEUR] WHERE SECTEUR_CODE !='?'";
    var ArrCol = new Array();
     
    //-> Je remplis la combo "appelante"
        FctRemplirCombo("CboSecteurCode", StrSQL, "IIS_SPORT", "SECTEUR_LIBELLE", "SECTEUR_CODE", String(Request.Form("CboSecteurCode")));
    //  - StrId             :   Identifiant de la combo
    //  - StrSql1           :   Chaîne SQL
    //  - StrFl             :   Profil
    //  - StrFv             :   Champs visible (affiché)
    //  - StrFi             :   Champs invisibles (index)
    //  - StrDefaultValue   :   Valeur par défaut
    //    Response.Write("Test : CboSecteurCode=" + Request.Form("CboSecteurCode") + "<br>");    
        StrSQL ='SELECT [CODE_AUTO], [AUTO_LIBELL] FROM [AUTO] WHERE [SECTEUR_CODE]="';// + String(Request.Form("CboSecteurCode")) + "'";
     
        Response.Write("Test : StrSQL=" + StrSQL + "<br>");
     
    //-> Je lance la requête pour récupérer le contenu de la seconde combo 
        ArrResultat = FctChargeRequeteEnTableau(StrSQL, "IIS_SPORT", "SECTEUR_LIBELLE", "SECTEUR_CODE")
    //  - StrSql1           :   Chaîne SQL
    //  - StrFl             :   Profil
    //  - StrFv             :   Champs visible (affiché)
    //  - StrFi             :   Champs invisibles (index)
    //  - ArrResultat       :   Tableau contenant les valeurs à afficher
    //Retourne              :   Le tableau contenant les valeurs renvoyées par la requête
     
    //-> Je remplis la seconde combo
        FctRempliSecondSelect(StrListe, StrChoix)
    //  - StrListe          :   Nom de la combo à remplir
    //  - StrChoix          :   Libellé de l'élément à remettre à zéro
     
    %>
     
        <input id="Submit1" name="Submit1" type="submit" value="submit" />  
      </form>
    </body>
     
    </html>

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Au premier abord, une bizarrerie
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function FctRempliSecondSelect(StrListe, StrChoix){
    Cette fonction asp (enfin ... située dans la partie ASP du code) utilise des instruction JS, de même que la fonction suivante

    Il me semble qu'avant d'aller plus loin il faudrait que tu revérifie le code pour que chaque partie soit à sa place (ASP / JS).

    Dans la même ordre d'idée, merci de poster le code généré et non le code serveur

    A+

  7. #7
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    481
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 481
    Points : 165
    Points
    165
    Par défaut
    En fait c'est la manière dont ils bossent.
    Je comprends que ça te pose problème. J'avoue que c'est aussi un peut mon cas.

    Mais bon c'est la manière dont ils bossent... Il y a du code JS au milieu de l'ASP et ça me perturbe pas mal à vrai dire.

    Par ailleurs, mais j'ai changé le nom des champs, des table et tout étant donné qu'ils ne veulent pas trop que je poste, donc c'est pas trop évident côté code généré.

    Par avance je te remercies.

    Marco.

  8. #8
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Hélas j'en suis resté à un fonctionnement très classique : ASP exécuté sur le serveur et JS sur le client.
    Je ne peux donc qu'en rester à des conseils "théoriques" (ci-dessus) et ne pourrais donc pas t'aider plus sur ces méthodes plus ... exotiques

    A+

  9. #9
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    481
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 481
    Points : 165
    Points
    165
    Par défaut
    Salut,

    C'est pas grave. Je vais juste reprendre certains points un par un en essayant de contourner la partie qui te pose problème d'accord ?

    Est-ce que ce bout de code te parraît correct ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     
     
    //-> Je lance la requête pour récupérer le contenu de la seconde combo 
        ArrResultat = FctChargeRequeteEnTableau(StrSQL, "IIS_SPORT", "SECTEUR_LIBELLE", "SECTEUR_CODE")
    J'obtiens les erreurs suivantes lorsque j'essaye de générer la page :
    StrSQL=SELECT [CODE_AUTO], [CODE_AUTO_LIBELL] FROM [CODE_AUTO] WHERE [SECTEUR_CODE]="D"

    Erreur ExecuteSqlServer : [Microsoft][ODBC SQL Server Driver][SQL Server]'D' : nom de colonne incorrect.

    Est-ce que tu verrais d'où ça pourrait venir s'il te plait ?

    Par avance merci.

    Marco

  10. #10
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Je ne suis pas sûr que la fin de ta requête soit correcte (tu as mis une partie en commentaire).
    La valeur (D) est doit être entourée de simples quotes mais le SQLServeur récupère des doubles
    Le délimiteur de valeur SQL est la simple quote (sous Oracle en tous cas, mais je crois que c'est pareil ici)

    Il me semble que tu devrais inverser les type des quotes :
    Ca devrait être
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    StrSQL ="SELECT [CODE_AUTO], [AUTO_LIBELL] FROM [AUTO] WHERE [SECTEUR_CODE]='" + String(Request.Form("CboSecteurCode")) + "'";
    Non ?

    A+

Discussions similaires

  1. affichage d'une combo en fonction d'une autre
    Par missjack dans le forum WebDev
    Réponses: 7
    Dernier message: 08/04/2015, 13h51
  2. [AC-2007] remplir combo en fonction d'un autre combo
    Par hellalaboy dans le forum IHM
    Réponses: 1
    Dernier message: 14/02/2012, 09h02
  3. [WD14] Remplir combo suivant valeur d'une autre combo
    Par extremenet dans le forum WinDev
    Réponses: 3
    Dernier message: 25/10/2011, 10h35
  4. [PHP 5.0] Combo en fonction d'une autre
    Par walacouper dans le forum Langage
    Réponses: 4
    Dernier message: 07/05/2009, 18h29
  5. Remplir une combo en fonction d'une autre
    Par loic20h28 dans le forum Visual Studio
    Réponses: 35
    Dernier message: 29/01/2008, 17h48

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