Toggle switches et maj bdd

Version imprimable

16/10/2023, 09h15
sylvain257

1 pièce(s) jointe(s)

Toggle switches et maj bdd

Bonjour,

J'aimerais mettre à jour une colonne de bdd à l'aide de switches. Cette colonne est un array PostGreSQL qui contient des insees de communes.

La donnée pour l'exemple ressemble à ça :

Code:

{'82019', '82031', '82032', '82033', '82099', '82112', '82169', '82170'}

J'ai un tableau de valeurs selon :

Pièce jointe 645311

Sur un switch il y a deux valeurs , par exemple 'On' et 'Off'.

Quand le switch est sur 'off', on enlève l'insee de l'array, quand il est sur 'on' on l'ajoute.

Comment faire pour lui attribuer une valeur à ce switch ?

Merci pour vos retours

Bonne journée

Sylvain
16/10/2023, 10h59
SpaceFrog

Quel balise est utilisée pour le switch ?
si c'est une balise qui a un value ... utilise le value
sinon passe par un attribut data-value et boucle sur les éléments pour constituer un json que tu pourrais envoyer au serveur pour la mise à jour de la BDD

Voila mon HTML

Code:

1
2
3
4
5
6
7
8
              <div class="switch" id="communes_user" data-insee="${row.insee}" onchange="getActiveCommune(this)">
                <label>
                  Off
                  <input type="checkbox">
                  <span class="lever"></span>
                  On
                </label>
              </div>

PS: lien vers mon code => https://codepen.io/sylvain258/pen/zYyQyyp?editors=1111

16/10/2023, 11h32
SpaceFrog

ce sont donc des inputs

Code:

<input type="checkbox" value="......" />

Tu peux donc leur mettre un value et l'utiliser

Code:

1
2
3
4
5
6
7
8
9
10
11
 $(':checkbox').on('change', function(){
  Communes=[];
   $(':checkbox:checked').each(
       function(){
         Communes.push( $(this).val() )
  } 
  )
 
   console.log(Communes);
 
 })

Faudra juste adapter le selecteur pour ne pointer que sur les checkboxes des communes

Citation:

Envoyé par sylvain257

Quand le switch est sur 'off', on enlève l'insee de l'array, quand il est sur 'on' on l'ajoute...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var inseeCommunes = [];
 
$(':checkbox').on('change', function () {
  let valInsee = $(this).parents('.switch')[0].dataset['insee'];
  if (this.checked) {
    inseeCommunes.push(valInsee) //Si true on l'ajoute au tableau
  } else {
    let index = inseeCommunes.findIndex(
      item => item === valInsee
    )
    inseeCommunes.splice(index, 1) //sinon on l'enlève du tableau
  }
  console.log(inseeCommunes);
})

Pour finir j'ai réussi de cette façon :

Pour chaque ligne :

Code:

1
2
3
4
5
6
7
8
9
10
11
function getActiveCommune(t) {
  if(($(t)).is(':checked')){
 
  // + requête ajax d'ajout d'une commune dans un array de base de donnée (pour info, la méthode pgsql pour ça c'est "array_append(mon_array, monélement)"), via un fichier PHP et une req UPDATE
 
  } else {
)
 //  + requête ajax de suppression d'une commune dans un array de base de donnée (ici la méthode c'est "array_remove(mon_array, monélement)")
 
}
}

Merci à tous,

Sylvain

17/10/2023, 22h40
ProgElecT

Salut
Ligne 7 une parenthèse fermante de trop.

Bonjour,
lorsque l'on utilise jQuery on ne devrait jamais voir de gestion d'événement inline

Code:

<input value ="82112" data-utilisateur=1 type="checkbox" onchange="getActiveCommune(this)">

Cela pourrait devenir simplement :
Code:

1 2 3 4 5 6 7 8 9 10 $(".switch input") .on("change", function() { const value = this.value; if (this.checked) { requeteAjax("AJOUTER", value); } else { requeteAjax("SUPPRIMER", value); } });