Créet un widget avec des champs de saisies

Utilisation du core de Jeedom Widgets
1

Bonjour à tous,
Je cherche à faire un widget pour saisir des informations pour les traiter après via un scénario.

Voilà où j’en suis :
Widget de type action.message

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="message" data-template="default" data-cmd_id="335667" data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1" data-version="1" data-eqLogic_id="2149">

  <div class="content">
	<input class="form-control input-sm nom" placeholder="Nom du colis" value="">
	<input class="form-control input-sm numero" placeholder="Numéro du colis" value="">
	<input class="form-control input-sm pays" placeholder="Pays de destination" value="">
	<input class="form-control input-sm code" placeholder="Code postal de destination" value="">
<a class="btn btn-xs execute">Exécuter</a>

  </div>
  <script>
    document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .execute').addEventListener('click', function() {
      let nom = document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .nom').value;
      let numero = document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .numero').value;
      let pays = document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .pays').value;
      let code = document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .code').value;

  console.log("Valeurs récupérées :");
  console.log("Nom:", nom);
  console.log("Numéro:", numero);
  console.log("Pays:", pays);
  console.log("Code postal:", code);
      jeedom.cmd.execute({ id: '335659', value: nom });//335657
      jeedom.cmd.execute({ id: '335661', value: numero });
      jeedom.cmd.execute({ id: '335663', value: pays });
      jeedom.cmd.execute({ id: '335665', value: code });

      jeedom.cmd.execute({ id: '335667' });
    });

    if ('#title_disable#' == '1') {
      document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .nom').style.display = 'none';
    }
    if ('#message_disable#' == '1') {
      document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .numero').style.display = 'none';
    }

    if (domUtils.issetWidgetOptParam('#title_possibility_list#', 'title_possibility_list')) {
      let mylist = '#title_possibility_list#';
      document.querySelector('.cmd[data-cmd_uid="3b8d5d7f-642d-4b1c-a0eb-42c013fae2f1"] .nom').jeeComplete({
        source: mylist.split(',').map(str => str.trim())
      });
    }
  </script>
</div>

Mon virtuel :

image
image1755×820 147 KB

Résultat :
image

Je n’arrive pas à récupérer les infos renseignées.
Pouvez-vous m’aider ?
Merci :slight_smile:

2

image
image2956×389 51 KB

image

Fonctionne parfaitement chez moi

3

Bonjour @Bonjour ,
Il y a une différence entre ta proposition et ma demande.
Tu as 1 champ, j’en ai 4.
Mathieu

4

Vous pouvez en mettre autant que vous voulez
A moins que vous ne vouliez qu’un seul bouton de validation tout en récupérant 4 infos différentes ?

5

Effectivement, je souhaite 4 champs avec un seul bouton de validation qui récupère les 4 données.

6

J’ai refait du code, mais pas mieux, j’ai une erreur

index.php?v=d&p=dashboard&object_id=17:281 Uncaught ReferenceError: addAction335657 is not defined
    at HTMLAnchorElement.onclick (index.php?v=d&p=dashboard&object_id=17:281:56)

L’id 335657 est la commande action message que j’ai dans mon virtuel.

<!-- Début de votre code HTML -->
<div class="cmd cmd-widget" data-type="action" data-subtype="message" data-cmd_id="#id#">
    <div class="title #hide_name#">
        <div class="cmdName">#name_display#</div>
    </div>
    <div class="content">

            <label for="input1#id#"></label>
            <input class="form-control input-sm" id="input1#id#" type="text" placeholder="Nom du colis">

            <label for="input2#id#"></label>
            <input class="form-control input-sm" id="input2#id#" type="text" placeholder="Numéro du colis">

            <label for="input3#id#"></label>
            <input class="form-control input-sm" id="input3#id#" type="text" placeholder="Pays de destination">

            <label for="input4#id#"></label>
            <input class="form-control input-sm" id="input4#id#" type="text" placeholder="Code postal de destination">
        </div>
        <a class="btn btn-success" id="btnAdd#id#" onclick="addAction#id#()">Ajouter</a>
    </div>

<script>
    function addAction#id#() {
        var champ1 = $('#input1#id#').val();
        var champ2 = $('#input2#id#').val();
        var champ3 = $('#input3#id#').val();
        var champ4 = $('#input4#id#').val();

        console.log("Valeur du champ 1 : " + champ1);
        console.log("Valeur du champ 2 : " + champ2);
        console.log("Valeur du champ 3 : " + champ3);
        console.log("Valeur du champ 4 : " + champ4);

        jeedom.cmd.execute({id: '335659', value: champ1});
        jeedom.cmd.execute({id: '335660', value: champ2});
        jeedom.cmd.execute({id: '335662', value: champ3});
        jeedom.cmd.execute({id: '335664', value: champ4});
    }
</script>

<!-- Fin de votre code HTML -->
1 « J'aime »
7

Après cliquer 4 fois c’est pas si grave que ça !

8

Hello,
Bon je n’y arrive pas.
Le morceau de ce code ne met pas à jour les commandes infos associées.
Comment faire ?

    $('.cmd[data-cmd_id=#id#] .execute').on('click', function() {
      jeedom.cmd.execute({id: '335659', value: champ1});
      jeedom.cmd.execute({id: '335660', value: champ2});
      jeedom.cmd.execute({id: '335662', value: champ3});
      jeedom.cmd.execute({id: '335664', value: champ4});
    });

Merci

9

Est ce que champ1 récupère bien la valeur de input1#id# ?

10

Tu as essayé var champ1 = $('input1#id#).val(); (aucune idée si ça change qq chose)

11

Hello @Noyax37 ,
Merci pour ton aide.
Dans les logs je vois bien que champX prend bien la valeur.
Avec ta proposition, j’ai une erreur comme quoi champ1 n’est pas défini.

Je viens de voir que j’avais une erreur :

ReferenceError: addAction335657 is not defined

L’id 335657 correspond à la commande action message où j’applique mon widget.

Mathieu

12

Hello @Phpvarious ,
Si tu passes dans le coin :slight_smile:
Merci