Faire cohabiter deux occurences de ddSlick dans un seul formulaire

**Mvu** · 31/07/2020, 17h52

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

**Toufik83** · 01/08/2020, 01h24

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 ?

**Mvu** · 01/08/2020, 09h19

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+

**Mvu** · 01/08/2020, 14h46

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

**Toufik83** · 01/08/2020, 17h41

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);
}

**Mvu** · 01/08/2020, 18h53

Effectivement... super, cela fonctionne parfaitement. Encire merci à toi.. Je laisse encore le post ouvert..

Faire cohabiter deux occurences de ddSlick dans un seul formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager