11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai une ou plusieurs case à cocher générés dynamiquement pour activer des options de mes widgets. Mais ne connaissant donc pas forcément le nombre d'options de chacun de mes widgets, ainsi que de leur nom, je dois pouvoir poster en JSON les cases à cocher "unchecked". Pour avoir un JSON propre dans le POST je ne peux pas mettre un input hidden car le serializeArray va envoyer deux valeurs pour la même case.

Donc j'ai du enlever le use_hidden_element(de ma configuration du formulaire ZF2) a false pour mes cases a cocher.
Sauf que, quand je ne les check pas, rien n'est envoyé en POST pour cette donnée, comme si elle n'existait pas.

Je dois donc modifier ce script Javascript pour que le JSON envoie correctement les donnée a mon controlleur.

$(".switch-checkbox").on('switchChange.bootstrapSwitch', function(event, state) {
    event.preventDefault();
    var data = JSON.stringify($('form[name="option"]').serializeArray());
    $.ajax({
      url: "<?php echo $this->url('widget/saveConfigure') ?>",
      dataType: 'json',
      contentType: 'application/json',
      async: true,
      data: data,
      type: 'post',
      beforeSend : function() {
        $(".flash-message > p").html('');
        $('.flash-message').addClass("hidden");
      },
      success: function (data) {
        $(".flash-message > p").html('').append("Changement pris en compte avec succès");
        $('.flash-message').removeClass("hidden");
      },

      error: function () {
          console.log("Error...");
      }
    });
  });



Donc quand je coche une donnée j'ai ceci (et ça marche déjà)
[{"name":"idConfig","value":"12"},{"name":"addDataFac","value":"1"}]



Mais si je ne coche pas, je n'ai rien alors que j'aimerai avoir ceci :
[{"name":"idConfig","value":"12"},{"name":"addDataFac","value":"0"}]



Votre aide est apprécié si vous avez déjà rencontré ce problème.
Modifié par Hooli (22 Sep 2015 - 11:48)
J'ai developpé un fix qui semble marcher, du moins j'ai le résultat attendu, mais je trouve que c'est du bricolage. Et que cela ne règle pas le problème.

voici la solution...

function saveChanges() {
    var data = JSON.stringify($('form[name="option"]', null, 2).serializeArray());
    var ObjUnique = JSON.parse(data);
    var toPost = [];

    $.each(ObjUnique, function (index, value) {
      var count = 0;
      $.each(ObjUnique, function (index, value2){
        if (value.name == value2.name) {
          count++
        };
      });
      if (count == 2 && value.value == "1") {
        toPost.push(value);
      };
      if (count < 2) {
        toPost.push(value);
      };
    });

    $.ajax({
      url: "<?php echo $this->url('widget/saveConfigure') ?>",
      dataType: 'json',
      contentType: 'application/json',
      async: true,
      data: JSON.stringify(toPost),
      type: 'post',
      beforeSend : function() {
        $(".flash-message > p").html('');
        $('.flash-message').addClass("hidden");
      },
      success: function (data) {
        $(".flash-message > p").html('').append("Changement pris en compte avec succès");
        $('.flash-message').removeClass("hidden");
      },

      error: function () {
          console.log("Error...");
      }
    });
  }


Si quelqu'un à une meilleure idée à me proposer.

En gros je fais un check si j'ai deux fois le meme objet avec le meme nom je prend celui avec la valeur 1. (case cochée) sinon je prends donc les champs qui n'apparaissent qu'une fois.