Help - Quel code JS a appliquer pour forcer la mise à jour d'un widget?

[Eridani78]

Bonjour à tous,

J’ai crée un widget que j’applique à une commande d’un virtuel de type Liste.
Dans mon script, je récupère la liste des options de la commande pour l’info, #ListValue#, sur laquelle j’applique une action JQuery .on(‹ click ›, … et qui change la valeur de l’info du virtuel.
Lorsque je clique dans le widget, la valeur de l’info est bien changée mais ma variable « ListValue » n’est pas mise à jour dans le widget d’ou un fonctionnement final du widget qui n’est pas OK.

J’ai cherché sur le forum sans trouver ce qui me permettrait de me débloquer.
Il est toujours possible qu’il y ai une erreur dans mon code.
Mais je me demande si il n’y a pas une subtilité du fonctionenment du core Jeedom qui m’échappe.
Par exemple, qu’elles sont les conditions qui provoquent le lancement du code du widget et donc l’exécution de la commande de mise à jour :
jeedom.cmd.update[’#id#’]({display_value:’#state#’, …

Pour ne pas surcharger, je n’ai pas joint à ce message le code de mon widget mais je peux le partager si nécessaire.

Merci d’avance

[Salvialf]

Salut,

Sans voir le code impossible de te conseiller d’une quelconque manière. Tu as un bouton « code » </> dans la barre pour partager le code justement.

Donc à l’aveugle le meilleur conseil qui peut t’être donné c’est de te référer au widget core qui gère les listes:

jeedom/core/blob/alpha/core/template/dashboard/cmd.action.select.default.html

[Eridani78]

Bonjour Salvialf,

Merci pour ta réponse.
Oui, j’avais déja regardé le code du widget core.
Précision également : lorsque j’applique le widget sur la commande, le widget se met a jour et l’affichage est comme attendu. Mais si je clique pour changer la valeur, l’affichage ne bouge pas.

Voici mon code :

<!-- file: /var/www/html/data/customTemplates/dashboard/cmd.info.string.HomeMode.html -->
<!-- EBo 2020 04 07 -->

<div class="cmd cmd-widget reportModeHidden #history#" data-type="action" data-subtype="select" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>
	<div class="value">
		<span class="timeCmd#uid# timeCmd label label-default value"></span>
	</div> 

    <div class="contMain#uid#">      
		<div class="colA#uid# colA1#uid#">
			<div class="rowA#uid#" id="indexidIndex">
				<div class="colB1#uid#">
					<div class="LEDIndicator"></div>
				</div>
				<div class="colB2#uid#"></div>
 				<div class="colB3#uid#"></div>             
			</div>
		</div>
      
		<div class="colA#uid# colA2#uid#">
		</div>
      
		<div class="colA#uid# colA3#uid#">
		</div>
      
		<div class="colA#uid# colA4#uid#">
		</div>      
    </div>
  
    <style>
        @media (hover: hover) {
            .colB3#uid#:hover {
            	background-color: rgba(80, 80, 80, 0.4);
            }
        }      
        .contMain#uid# {
			display: grid;
			grid-template-columns: repeat(4,1fr);
			column-gap: 10px;
			position: relative;
			background-color: rgba(50, 50, 50, 1.0);
      	}
        .colA#uid# {
			display: grid;
			grid-auto-rows: 24px;
			grid-row-gap: 4px;
			position: relative;
        }
        .rowA#uid# {
			display: grid;
			grid-template-columns: 20px 24px 1fr;
			column-gap: 4px;
			position: relative;
            background-color : transparent;
        }      
        .colB1#uid# {
			justify-self: center;
			align-self: center;
			border-radius: 5px;
        }	
        .colB2#uid# {
			display: grid;
			align-content: center;
          	justify-content: center;
			background-color : grey;
			border-radius: 5px;
        }
        .colB3#uid# {
			display: grid;
			align-content: center;
          	justify-content: left;
			padding-left: 10px;
			background-color : grey;
			border-radius: 5px;
        }      
        .LEDIndicator {
			width: 4px;
			height: 20px;
			border: 1px solid grey;
			border-radius: 5px;
        }		
   	</style>

	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          
			var cmd = $('.cmd[data-cmd_id=#id#]');
          
			if('#_time_widget_#' == '1'){
				jeedom.cmd.displayDuration(_options.valueDate,  cmd.find('.timeCmd'));
			}else{
				cmd.find('.timeCmd').parent().remove();
			}
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');         

			// Processing
			var stringValue 	= _options.display_value;
          	var homeModeValue 	= _options.display_value;
          	var inputString		= '#listValue#'; 					// Do not use "#xxx#", use '#xxx#'
          	var inputString 	= inputString.toString();
          	var separator		= '</option>';
			var listArray		= inputString.split(separator);
         	var listArrayLength = listArray.length;
          	var listLength		= listArrayLength-2;				// [0]="Aucun", [1]="Option1", [2]="Option2", ..., [3]="", [?]=undefined

		$(".contMain#uid#").find(".colA1#uid#").empty();
		$(".contMain#uid#").find(".colA2#uid#").empty();
		$(".contMain#uid#").find(".colA3#uid#").empty();
		$(".contMain#uid#").find(".colA4#uid#").empty();
          
		for (let i = 0; i < listLength; i++) {
          		const regex 		= /<option value="(.*)"(?:\s*)(.*)>(.*)/ig;
              	var itemArray 		= regex.exec(listArray[i]);			// [0]=Full string, [1]=Option Value, [2]=('' | selected), [3]=Option Text
                var optionValue		= itemArray[1];              	
                var	optionSelected	= itemArray[2];              
                var optionText		= itemArray[3];
				var idIndex 		= i.toString();
              
                var divrowAa = '<div class="rowA#uid#" id="index';
                var divrowAb = '"><div class="colB1#uid#"><div class="LEDIndicator"></div></div><div class="colB2#uid#">';
                var divrowAc = '</div><div class="colB3#uid#">';         
                var divrowAd = '</div></div>';
              	var divrowA  = divrowAa+idIndex+divrowAb+optionValue+divrowAc+optionText+divrowAd;
              
                if (optionValue < 16) {
                  	$(".contMain#uid#").find(".colA1#uid#").append(divrowA);              
                } else if (optionValue >= 16 && optionValue < 24) {
                  	$(".contMain#uid#").find(".colA2#uid#").append(divrowA);       
                } else if (optionValue >= 24 && optionValue < 28) {
                  	$(".contMain#uid#").find(".colA3#uid#").append(divrowA);       
                } else if (optionValue >= 28 && optionValue < 32) {       
                  	$(".contMain#uid#").find(".colA4#uid#").append(divrowA);   
                } else {
                  	$(".contMain#uid#").find(".colA1#uid#").append(divrowA);   
                }
              
                if (optionSelected == "selected") {
                  	$('#index'+idIndex).find('.colB1#uid#').find(".LEDIndicator").css("background-color","LawnGreen");              
                }      
            }
		}      

		// Click handling
      	$(".contMain#uid#").off().on('click', '.rowA#uid#', function () {
       		jeedom.cmd.execute({id: '#id#', value: {select: $(this).find('.colB2#uid#').html()}});         
    	});
 		// Widget update     
      	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
     
		$('body').on('changeThemeEvent', function (event, theme) {
			$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
		});      
	</script>
</div>

[Eridani78]

Bonjour,
Je me permet de revenir vers toi. Une idée ?
Une nouvelle précision, j’ignore si cela aura de l’importance pour investiguer le sujet ou si le fonctionnement du core Jeedom en dépend :
Dans la premiere ligne du code que j’ai envoyé, le commentaire n’est pas à jour.
Le libellé du fichier du code du widget est comme indiqué ci-dessous …
<!-- file: /var/www/html/data/customTemplates/dashboard/cmd.action.select.HomeMode.html -->

Je suis un peu bloqué la.
J’ai fait pleins d’essais de code et je n’arrive pas a trouver ce qu’il faut faire pour que cela fonctionne.
Merci d’avance.

[Salvialf]

Bonjour,

J’ai mis un signet mais pas eu l’occasion de regarder encore… et ton code est un peu touffu quand même

Oui t’as bien fait de préciser pour le nom du fichier !

D’ailleurs ta commande action/liste est bien liée à une commande info/autre dans ton virtuel ?

J’essaye de regarder tout ça ce week-end

[Eridani78]

Merci

[Eridani78]

Bonjour,
J’ai poursuivi mes investigations et je pense que mon soucis est le suivant :
Lorsqu’une option est choisie par l’instruction :

      	$('.contMain#uid#').off().on('click', '.rowA#uid#', function () {
       		jeedom.cmd.execute({id: '#id#', value: {select: $(this).find('.colB2#uid#').html()}});
    	});

j’utilise alors l’attribut ‹ selected › pour allumer la valeur affichée dans mon widget.
Hors, dans ce cas, l’attibut ‹ selected › n’est affecté à la bonne option qu’après une mise à jour de la page.
Pour le moment, je n’arrive pas a voir comment et ou cela est réalisé « en temps réel » par le widget core (celui dont tu as rappellé le code ci-dessus).

[Eridani78]

Bonjour,
Après investigations donc, il me semble que j’ai compris pourquoi mon widget ne réagit pas comme je l’espérait.
Sauf erreur de ma part, mon code est bon. Ce qui se passe …

Je rappelle le contexte:
Virtuel crée avec une INFO et une COMMANDE de type LISTE qui modifie la valeur de l’info.
Un processus Jeedom crée le tag #listValue# et ce tag est utilisé en entrée dans les widgets (y compris Core) pour selectionner la valeur de l’info choisie parmi les valeurs de la liste.

L’action de sélectionner une valeur (par exemple dans un menu déroulant proposé par le widget core) PROVOQUE une mise à jour de la valeur de l’info dans le virtuel mais NE PROVOQUE PAS une mise à jour du tag #listValue#. Ce tag est mis a jour par exemple lorsqu’il y a un rafraichissement de la page.
En conséquence, utiliser le tag #listValue# juste après selection d’une nouvelle valeur de la liste et avant qu’il se soit passé un rafraichissement quelconque conduit à une utilisation erronnée.

Voila. J’espère que je ne me suis pas trompé dans mes conclusions (il faut être prudent et humble).
J’ignore si ce fonctionnement est normal, voulu ou pas ?

En tout cas, je ne sais pas comment forcer cette mise à jour avec une instruction Javascript/JQuery ?
Si quelqu’un pouvait m’aider ?

Merci et Joyeuses Pâques à tous

[Eridani78]

Bonjour,
Je n’avais pas fait attention a ta dernière question.
Oui la commande action/liste est bien liée a une info/autre.

Tu aurais finalement une idée concernant comment forcer la mise a jour du tag #listValue# ?

[Salvialf]

J’ai pas eu l’occasion de regarder encore… Mais je viens de bien relire ta demande avant d’y jeter un œil justement

Tu veux que la valeur qui apparaît dans la liste corresponde à la valeur de la commande info c’est ça ?
Y’a eu ce sujet récemment sur ce propos:

Liste déroulante

Bonjour, j’ai créé une commande action de type liste déroulante qui fonctionne bien. Cependant, lors du rafraîchissement de la page je perds la valeur sélectionnée et la liste affiche « aucun ». Est-ce possible de conserver dans la liste la valeur choisie ? Merci de vos retours

[Eridani78]

Non, non,
Regarde mon message d’il y a deux jours. J’ai pas mal cherché et finalement synthétisé ce qui coince.
Mon message commence comme ca :
"Bonjour,
"Après investigations donc, …

[Eridani78]

Peut être que pour mieux comprendre le problème, il faut savoir que dans le tag #listValue#, l’option choisie est affectée de la propriété « selected » et donc le contenu de la string #listValue# change a chaque fois qu’une valeur différente de la liste est choisie.
Si cette précision peut aider …

[Eridani78]

Bon,

Il semble qu’il soit difficile de trouver quelqu’un qui pourrait m’aider sur ce point
Peut être n’ai-je pas poser le problème d’une manière assez explicite.
Je comprend aussi que, malgré leur bonne volonté, les spécialistes ont ici beaucoup de questions à traiter quotidiennement .

Pour info, j’ai pour le moment appliqué l’instruction ’ location.reload() ’ qui remet à jour la page entière lorsque la valeur de l’info/liste est changée mais cette solution n’est pas très satisfaisante.

Voila. Je ferme le sujet.

[ajja17orange]

bonjour
j’ai pas le temps de tester et faire

mais si tu veux c’est de l’api js jeedom
si tu regarde je n’utilise pas le code widget (tag)
je le recréé via api js du html

[WIDGET] Historique et Tendance

dans le dernier update #ton_tag# ou les #tag# que jeedom créé on ne maîtrise pas le processus mais on peux passé par l’api js donc ton 1er update en plus jeedom.hystory.get (recherche mini et max, pour période, recherche avant dernière valeur pour une tendance perso,…) exemple sans update mais interactif https://forum.jeedom.com/viewtopic.php?f=25&t=35100&sid=2a79989fdd966ee9243a091137b4f110&start=220#p778253 pour te montrer l’interractif [design (test)] ta bdd est conséque…

chaque choix de fonction va changé les variable de temps mini/maxi
et fait une requête actu immédiate sur l’api js jeedom
j’ai pas mis l’actu (au fil du temps)
ensuite pour l’enregistrement du choix de ta liste ton navigateur peux enregistré
ou retourné sur une info virtuel

et tu utilises se genre de manip dans le plug html display

ça demande beaucoup de temps.
donc si ta solution te conviens c’est le principal même si ton idée je l’ai mise de côté

[Eridani78]

Bonjour,
Je ne maitrise encore rien des dessous de Jeedom mais j’apprend …
C’est un bel outil et Jeedom est au coeur d’un univers fascinant et passionnant, partagé par une communauté de gens vraiment sympas …

Je n’avais pas encore appréhender cette API Jeedom JavaScript dont tu parles. Je vais chercher.
Ta réponse m’ouvre probablement de nouveaux horizons pour développer mes widgets et autres applications.

Je te remercie