Etat lumières d'un menu HTML Display

Bonjour,
j’ai créé un menu avec le plugin HTML Display pour faire mon Design.
J’aimerais que lorsqu’une lumière s’allume, le nombre de lumières s’affiche dans le menu en face de l’icone lumière.
Voilà ce que cela donne:
img1

Le problème c’est que je suis obligé de rafraîchir ma page pour que jeedom affiche le résultat.
Je ne sais plus comment faire.
Voici le code html:

   
     <!-- LUMIERES  -->
           <li class="sidebar-dropdown">
            <a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
              
             <i class="fa fa-lightbulb" aria-hidden="true"></i> 
              <span>LUMIERES</span>   
              
              <span class="NbLumieres badge yellow"></span>              
              
            </a> 
          </li>
        
      
      <div>

        <script>
  var NbLumieres=2217;
    
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: NbLumieres,
                                success:  function(valeur_courante) {
                            //      alert(valeur_courante);
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', '');  
                            $('.yellow').hide(); // Cache le badge si 0 
} 
                                 
                                  else {$('.NbLumieres').css('color', '#00008B');
      $('.NbLumieres').append(valeur_courante);}
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
  
	</script>

Merci beaucoup

1 « J'aime »

bonjour
il te manque le set attribut sur id

fait des test avant mise en place

Merci pour ta réponse,
mais je ne sais pas où et comment mettre le .setAttribute sur « data-cmd_id ».
J’ai fait comme cela mais ça ne fonctionne pas.

   <script>
  var NbLumieres=2217;
    
          $('.NbLumieres')[0].setAttribute('data-cmd_id', NbLumieres);
          
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: NbLumieres,
                                success:  function(valeur_courante) {
                            //      alert(valeur_courante);
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', '');  
                            $('.yellow').hide(); // Cache le badge si 0 
} 
                                 
                                  else {$('.NbLumieres').css('color', '#00008B');
                                        
      $('.NbLumieres').append(valeur_courante);}
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
  
	</script>

Merci de ton aide.

la difference entre

un span et div
et une class et un id

ça à son importance là pour obtenir
image

une base fonctionnel « tester »

     <!-- LUMIERES 
       -->

<li class="sidebar-dropdown"><div id="light" class="cmd">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
<i class="fa fa-lightbulb" aria-hidden="true"></i>
              <span>LUMIERES</span>
  
              <span class="NbLumieres badge yellow"></span>    
   </a>  </div>           
          </li>
<li class="sidebar-dropdown"><div id="rc" class="cmd">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
<i class="fa fa-lightbulb" aria-hidden="true"></i>
              <span>VOLET</span>
  
              <span class="NbVolet badge yellow"></span>    
   </a>  </div>           
          </li>
<style>
li {
  display: inline;
}
</style>
        <script>          
  var NbLumieres=205;
      $('#light')[0].setAttribute('data-cmd_id', NbLumieres);
          
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ id: NbLumieres, success:  function(valeur_courante) {
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', ''); 
$('.yellow').hide(); // Cache le badge si 0 
} else { $('.NbLumieres').css('color', '#00008B').append(valeur_courante); 
$('.yellow').show()       
       }
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
	</script>

hs
tu caches yellow « hide » mais tu ne le montres pas « show »

Merci pour ton aide, par contre, je suis toujours obligé de rafraîchir ma page du design pour mettre à jour la valeur du nombre de lumières.
Cela ne ce fait pas automatiquement.
Une idée?
Merci

as tu l’équipement sur la même page que le plug html display
si oui c’est normal
2 data-cmd_id avec le meme ID
un seul se met a jour (j essai de trouver une manière pour reprendre la mise à jour)
si non
test avec mon petit morceau de code et si c’est ok c’est dans ton code complet

Merci pour ta réponse, effectivement, j’avais l’équipement sur la même page.
C’est donc résolu…
Merci beaucoup pour ton aide et ta patience.

Sans titre1

<div id="report2">
</div>
<script>
  var id_surveil2=205;
//var elem1 = '.cmd[data-cmd_id="205"]';
var elem2 = '.cmd[data-cmd_id="'+id_surveil2+'"]';
var targetNode2 = document.querySelector(elem2);

// Options de l'observateur (quelles sont les mutations à observer)
var config = { attributes: true, childList: true };


var execute2 = function() {
jeedom.cmd.execute({ id: id_surveil2, success:  function(valeur_courante) {
 $('#report2').text(valeur_courante); 
       }
				})
};  
// Créé une instance de l'observateur lié à la fonction de execute
var observer2 = new MutationObserver(execute2);

// Commence à observer le noeud cible pour les mutations précédemment configurées
observer2.observe(targetNode2, config);
  
// L'observation peut être arrêtée par la suite
// observer2.disconnect();
</script>

[lors de modif de se code faire un ctrl-f5 ou decommenter la dernier ligne pour arrêté observer]

dans ton code savoir si data-cmd_id est déjà dans la page
si
if ($("div[data-cmd_id="+NbLumieres+"]").length == 1){
il est déjà present dans la page de là le mini script du dessus à adapter
} else {
existe pas la setattribut,…
}

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.