Discussion :

[sylvain257]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai un tableau de valeurs selon :



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

[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

[sylvain257]

Voila mon HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

ce sont donc des inputs

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Tu peux donc leur mettre un value et l'utiliser

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ASCIIDEFOND]

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sylvain257]

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

Pour chaque ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ProgElecT]

Salut
Ligne 7 une parenthèse fermante de trop.

[NoSmoking]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Cela pourrait devenir simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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