Requête AJAX a partir d'un code Widget html

[Eridani78]

Bonjour,

J’essaye d’écrire un code widget (html/javascript) en y intégrant une ou des requêtes AJAX.

Le code html est dans le répertoire :

html/data/customTemplates/dashboard/

Avec un appel a un fichier .php situé sous le même chemin, j’obtiens un code d’erreur 404 à la requête http (de type GET).
J’ai essayé de renommer ce fichier en .html pour bypasser le .htaccess et voir mais j’ai toujours l’erreur 404.

Puis avoir l’avis de spécialistes ?

Du aux dernières mesures de sécurité sur Jeedom, est-il toujours envisageable de pouvoir intégrer des requêtes AJAX à partir d’un code Widget ou non ?

Merci d’avance

Ma configuration
Raspberry Pi4B 8 Go - Debian GNU/Linux 10 (buster) 64 bits (aarch64)
Jeedom version Stable 4.2.18

[Mips]

Bonjour,

@Eridani78

Avec un appel a un fichier .php situé sous le même chemin

Càd ? Quel chemin ? Montrez le code sinon on ne peut pas deviner.
Si vous avez mis html dans le chemin, c’est le problème (ou une partie)

@Eridani78

Du aux dernières mesures de sécurité sur Jeedom, est-il toujours envisageable de pouvoir intégrer des requêtes AJAX à partir d’un code Widget ou non ?

C’est possible si cela respecte les règles
De nouveau sans le code, difficile de répondre plus précisément.

Ceci dit, cela ne me semble pas une bonne idée à priori, cela ne devrait pas être nécessaire de faire un appel de plus.

[Eridani78]

Bonsoir et merci @Mips pour votre réponse.

Voici un extract du code qui pour le moment me renvoie l’erreur 404 sur la requete http.
Les fichiers :

• cmd.info.numeric.Temperature.html
• test.php
  sont tous les deux dans le répertoire « html/data/customTemplates/dashboard/ »

<div class="cmd cmd-widget #history# container-fluid tooltips reportModeHidden" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_uid="#uid#" data-version="#version#">
....
		<div id="test"></div>
...
	<script type="text/javascript">
		jeedom.cmd.update['#id#'] = function (_options) {
			let cmd = $('.cmd[data-cmd_id=#id#]');
			cmd.attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate)

			// Command ID 
			var commandID 				= '#id#';

            (function () {

              var httpRequest = new XMLHttpRequest();
              httpRequest.onreadystatechange = function() {
                let responseCode = this.readyState;
                let httpRequestCode = this.status;
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        document.getElementById("test").innerHTML = this.responseText;
                    } else {          
                        document.getElementById("test").innerHTML = httpRequestCode + " Probleme avec la requete http";      
                    }          
                } else {
                    document.getElementById("test").innerHTML = responseCode + " Reponse pas encore prete"; 
                }    
              };
              httpRequest.open("GET", "test.php", true);
              httpRequest.send();

            })();
......
	</script>

Si il n’y a pas de limitation Jeedom, c’est que je fais une erreur quelque part.
Pour le moment, je cherche …

[Mips]

Votre fichier test.php ne se trouve pas à la racine du site mais dans

@Eridani78

data/customTemplates/dashboard/

Il faut donc le spécifier fans la requête.

Pour tester de votre côté, ouvrez la console développeur du navigateur (touche F12) et ouvrez l’onglet réseau, ensuite provoquez la requête et vous verrez ce que fait le navigateur

[Eridani78]

Bonjour @Mips ,

Merci pour cet éclairage et le temps passé.
Oui effectivement, il y avait de base un problème de chemin.

J’ai donc créé un fichier test.html (j’essayerais avec un fichier test.php plus tard …) placé dans

html/data/customTemplates/dashboard/

et modifié ma ligne de code de la façon suivante

httpRequest.open("GET", "data/customTemplates/dashboard/test.html", true);

Je n’ai plus l’erreur 404 mais maintenant l’erreur 403

403 Forbidden
You don't have permission to access this resource.

Et la pour le coup, je me sent totalement bloqué.
Une idée ?

Pour info, mon fichier test.html :

<html>
<body>  
	<h1>AJAX</h1>
	<p>AJAX Response : OK.</p>
</body>
</html>

[Salvialf]

Salut,

Tu devrais expliquer ce que tu cherches à obtenir comme résultat à mon avis.

Le core est doté de nombreuses fonctions (non documentées) permettant de récupérer à peu près tout ce qu’on veut directement en js.

[Eridani78]

Bonjour @Salvialf ,

Oui bien sur, c’est une autre approche mais je voulais avant tout voir ce qui était faisable dans ce contexte (requête Ajax) pour créé des widgets.

Mon but dans le cas présent est de compléter un widget déja créé qui affiche la température avec les informations de Temp. Min, Temp. Max, Tendance sur la journée.

Bien sur, il existe dans le core de Jeedom les tags :

#minHistoryValue#
#maxHistoryValue#
#tendance#

Mais si j’ai bien compris (il se peut que je me trompe …), ces valeurs sont calculées par rapport à une durée glissante (24h00 par défaut qui peut être modifiée, 2h00 pour tendance).
Donc si il a fait très chaud la veille et beaucoup moins le lendemain, l’affichage n’est pas très représentatif une bonne partie de la journée.

Mon but était (a partir de requête Ajax sur un fichier .php) plutot d’utiliser les fonctions de la forme :

minBetween(#[Climate Data][TempHumid][Bureau Temperature]#,Today,Now)
maxBetween(#[Climate Data][TempHumid][Bureau Temperature]#,Today,Now)

pour être sur la journée en cours.

En gros voila. J’espère que je n’ai pas faux dans mon analyse.

[ajja17orange]

bonjour,

utilisation du testeur d’expression en js

<div>
<script>
 // var expression1 = '#[résumé][Heliotrope][Altitude du Soleil]#';
 var expression1 =  'maxBetween(#[résumé][Heliotrope][Altitude du Soleil]#,Today,Now)';
          jeedom.scenario.testExpression({
            expression: expression1,
            success:  function(data) {
               console.log(data);
              }
          })
            console.log("test1")
	</script>
</div>

voici le retour console dans un design

n’ayant qu’un texte/html

[Eridani78]

Bonjour @ajja17orange ,

Avant toute chose, un grand merci pour ton message et ta suggestion.
C’est un contournement astucieux du testeur d’expression en effet.

Evidement, ce n’est pas aussi puissant qu’un scénarion PHP que l’on pourrait appeler au travers d’une requête AJAX mais ca pourrait répondre à mon besoin ponctuel.

Juste pour info, j’ai complété mon widget Temperature avec les données min, max Historique et ce matin, le max de la journée était de 25°C (il ne faisait que 18°C dehors). Ces variables Historiques sont certainement très utiles mais avec leur plage glissante, à mon avis, inadaptées à leur utilisation pour des observations journalières.

Bref, si on revient à ton idée, j’ai juste un petit soucis et je ne vois pas comment le résoudre.
Dans mon code HTML du widget, je sais récupérer l’Id de la commande (#id#) mais sans faire appel à des instructions PHP du core, je ne vois pas comment récupérer la commande sous la forme « HumanReadable » (#[object][equipment][command]#) que je dois intégrer dans l’instruction « maxBetween … »

Une idée ?

[ajja17orange]

bonjour, en js on peux faire beaucoup, tu as un tas de commande (voir le repertoire js du core) mais il ny a pas scenario expression.

c’est toi qui m’a donné l’idée d’essayer le testeur d’expression en js !

tu as history get et avec un input definir une periode. (interractif)

inspire toi de se message
d’un resultat d’api engendre un autre resultat d’api
donc tu peux construire le HumanReadable

Code widget (v4) HTML

il ny a pas de doc « api js » c’est en farfouillant dans le code (j’en trouve encore) ligne 23 créé un html dans un design ou via plug html display remplace dans le code id = 10 par un id d’une commande de ton équipements (action ou info) <div> <script> jeedom.cmd.byId({ id: 10, }) </script> </div> sauvegarde ça va rien faire tu mets ton navigateur en mode dev (sous chrome f12) tu clic sur l’onglet console / info / objet tu vas avoir plein d’info [image…

mais je crois avoir vu en js la fonction pour récupère via l id sont nom

pour moi un scenario ca reste un scenario mais des fois que tu peux construire un fichier php

Lancer Cmd sur ouverture d'un Design

Hello @sigalou, EDIT : Je crois avoir compris ta question, et ça n’a rien à voir, une commande d’un plugin par exemple ? La seule possibilité que j’ai en tête, pour exécuter du php par exemple à l’ouverture d’un design, c’est en ajax, tu peux, en cliquant sur un lien/bouton par exemple ou au chargement de la page : <p></p> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: 'POST', url: 'test.php', succes…

soyons plus fou il y a peut etre moyen de créé sa fonction js tous comme en php ?

[Eridani78]

Bonsoir @ajja17orange ,

De nouveau merci pour ces informations fort pertinentes.
Je pense que dans un premier temps, je vais me servir de ces pistes pour travailler en Java Script.
Mais j’avoue que je regarderais bien aussi le moyen de créer une fonction en PHP que l’on pourrait appeler en JS.
A voir …
Je te souhaite une bonne soirée.

[ajja17orange]

je suis idiot ! tu as la solution avec le testeur d’expression
1 prend et test cette fonction

Appelle page php ne marche plus?

Si vous voulez utiliser la méthode de @Salvialf au dessus. Il faut éditer le fichier : data/php/user.function.class.php et coller la fonction ci-dessous: public function MonHoraire($nb_day) { date_default_timezone_set('Europe/Paris'); setlocale(LC_TIME, 'fr_FR.utf8','fra'); $horaire = array( 'lundiA' => '10h ==> 19h', 'mardiA' => '10h ==> 18h45', 'mercrediA' => '10h30 ==> 19h30', 'jeudiA' => 'Repos', 'vendrediA' => 'Repos', 'samediA' => '11…

2 le code

<div class="Eridani78">
<script>
 // var expression1 = '#[résumé][Heliotrope][Altitude du Soleil]#';
// var expression1 =  'maxBetween(#[résumé][Heliotrope][Altitude du Soleil]#,Today,Now)';
   var expression1 =  'MonHoraire(2)';

          jeedom.scenario.testExpression({
            expression: expression1,
            success:  function(data) {
               console.log(data.result);
              $('.Eridani78').html(data.result);
              }
          })
            console.log("test1")
	</script>
</div>

3

ps pour le getHumanCmdName

<div class="Eridani78">
<script>
jeedom.cmd.getHumanCmdName({
id:'1000',
     success:  function(data) {
     console.log(data);
       $('.Eridani78').text(data);
       }
         })

	</script>
</div>

ça donne

<div class="Eridani78">
<script>
jeedom.cmd.getHumanCmdName({
	id:'1000',
	success:  function(data) {
       $('.Eridani78').text(data);
       var recup_id=data;

 
// var expression1 =  'maxBetween(#[résumé][Heliotrope][Altitude du Soleil]#,Today,Now)';
		var expression1 =  'maxBetween('+recup_id+',Today,Now)';
		
      	jeedom.scenario.testExpression({
		expression: expression1,
		success:  function(data) {
              $('.Eridani78').append(" = "+data.result);
              }
		})
	}
})
</script>
</div>

[Eridani78]

Oh merci.
Mais je pars en deplacement pour la semaine.
Je teste à mon retour. A bientot.

[Eridani78]

Bonsoir @ajja17orange

Vraiment super ces pistes pour integrer des commandes de l’API Jeedom JavaScript dans le code html.
Je te remercie.
Du coup, en creusant un peu les liens que tu m’as fourni, je me suis plutot orienté vers la commande :

jeedom.history.get

Mais je rencontre une difficulté avec des incohérences entre les résultats :

let historyArray 			= history.data;
let historyminValue 		= history.minValue;
let historymaxValue 		= history.maxValue;

que je vais remonter sur un nouveau post.

Donc, encore merci et a une autre fois peut être.
Bonne soirée

[ajja17orange]

bonjour,
des fois que ; c’est vieux pour moi mais vérifie si min/max le retour n’a pas un décalage d’une heure.

si c’est ça vérifie si toutes les dates système sont en français « commande ssh, bios rasp,… ».