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

  1. #1
    Membre régulier
    Faire cohabiter deux occurences de ddSlick dans un seul formulaire
    Bonjour,
    Je voudrais inclure deux ddSlick dans un même formulaire.
    Mon premier ddSlick:
    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
    <select id="DivData">
    			<script>
                                    $(document).ready(function () {
                                      $('#DivData').ddslick({
                                            data: ddData,
                                            width: 300,
                                            selectText: "Choix du débord pour ddData",
                                            imagePosition: "right",
                                            onSelected: function (data) {
                                              console.log(data.selectedData);
                                              $("[name=data]").val(data.selectedData.value);
                                              $("[name=formulaire]").submit();
                                            }
                                      });
                                    });
                    </script>
    </select>
    <input textarea name="data" type="hidden" ></input>	
    <div>


    Mon idée était d'écrire le deuxième ddSlick de cette manière: mais cela ne marche pas.
    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
    <select id="DivData1">
    			<script>
                                    $(document).ready(function () {
                                      $('#DivData1').ddslick({
                                            data1: ddData1,
                                            width: 300,
                                            selectText: "Choix du débord pour ddData1",
                                            imagePosition: "right",
                                            onSelected: function (data1) {
                                              console.log(data1.selectedData);
                                              $("[name=data1]").val(data1.selectedData.value);
                                              $("[name=formulaire]").submit();
                                            }
                                      });
                                    });
                    </script>
    </select>
    <input textarea name="data1" type="hidden" ></input>	
    <div>


    Possible de voir le problème sur http://www.mycabinet.be/Default-Developpez.asp
    Marc Van Uytvanck
    Bruxelles

  2. #2
    Membre émérite
    Salut,

    Avant tout, il faut supprimer les balises <script> de ton code html et mettre le code js dans la partie <head> :
    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
     
     <!DOCTYPE html>
    <html lang="fr">
        <head>
           <meta charset="UTF-8" />
           <title>ddslick exemple</title>
           <script src="https://code.jquery.com/jquery-3.5.1.js"
                    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
                    crossorigin="anonymous">
           </script>
           <script src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js"></script>
           <script>
                $(document).ready(function () {
                                    let ddData=[
                                                    [{text:"choix1",value:1,},{text:"choix2",value:2,}],//data du premier select                                            
                                                    [{text:"choix3",value:3},{text:"choix4",value:4}]//data du 2éme select
                                    ],
                                    selectedText=["Choix du débord pour ddData","Choix du débord pour ddData1"];//pour le texte
                                    $('.sel')
                                      .each(function(i){
                                                    $(this).ddslick({
                                                            data: ddData[$(this).index()],
                                                            width: 300,
                                                            selectText: selectedText[$(this).index()],
                                                            imagePosition: "right",
                                                            onSelected: function (data) {
                                                                    console.log(data.selectedData,i);
                                                                    //on sélectionne le bon name en fonction de i (soit 0, soit 1...)
                                                                    $("[name='"+(i==0?'data':'data1')+"']").val(data.selectedData.value);
                                                                    //$("[name=formulaire]").submit(); pourquoi ne pas utiliser ajax au lieu d'un submit classique ?
                                                            }
                                                    });
                                    });
                            });
     
           </script>
        </head>
        <body>
                <select id="DivData" class="sel"></select>
                <select id="DivData1" class="sel"></select>
                <input  name="data" type="hidden" />
                <input  name="data1" type="hidden" />
     
        </body>
    </html>


    Concernant la soumission du formulaire, je pense que ce n'est pas une bonne idée, car le formulaire sera soumit à chaque fois tu sélectionnes dans les listes déroulantes

    Pourquoi ne pas utiliser $.ajax au lieu d'une soumission classique ?

  3. #3
    Membre régulier
    Magnifique ! Merci Toufik83. Je laisse encore le post ouvert pour l'instant car j'aurai sans doute encore l'une ou l'autre question. A+
    Marc Van Uytvanck
    Bruxelles

  4. #4
    Membre régulier
    Rebonjour, j'ai ajouté un troisième menu déroulant. Nous avons maintenant data,data1 et data2.
    Du coup j'ai écrit à ligne #32 ceci:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
     $("[name='"+(i==0?'data':'data1':'data2')+"']").val(data.selectedData.value);
    mais cela ne fonctionne pas. Qu'ai -je fait qui n'est pas correct ?
    Pour voir: http://www.mycabinet.be/toufik83.asp
    Marc Van Uytvanck
    Bruxelles

  5. #5
    Membre émérite
    Bonjour,

    Eh ben ça ne marche pas parce que tu t'es trompé dans la condition ternaire, la correction est :"[name='"+(i==0?'data':i==1?'data1':i==2?'data2':'null')+"']".


    Sinon si tu ne maîtrises pas la syntaxe d'une condition ternaire, tu peux la remplacer par un simple if et else if, comme ça :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    onSelected: function (data) {
    	let name;
    	if(i==0) name="data";
    	else  name="data"+i;
            console.log(data.selectedData,i);
            $("[name='"+name+"']").val(data.selectedData.value);
    }

  6. #6
    Membre régulier
    Effectivement... super, cela fonctionne parfaitement. Encire merci à toi.. Je laisse encore le post ouvert..
    Marc Van Uytvanck
    Bruxelles

###raw>template_hook.ano_emploi###