Problème appel de function d'un javascript importé

[michael]

Bonjour,
je développe un plugin qui fonctionne parfaitement en V4.3.
J’ai installé une version Beta sur un docker afin de préparer mon plugin à la sortie de la version du core 4.4. ( sans jqwery)
Cependant, je rencontre un problème à l’affichage de mes widgets, en effet afin que mes widgets soit plus légers et par facilité si il y a une modification sur javascript a effectuer, l’utilise un fichier javascript que j’importe de cette manière dans mon widget:

or lors de l’appel d’une fonction qui se trouve dans ce fichier, j’obtiens cette erreur:
Uncaught ReferenceError: Commun_widget is not defined
merci de votre aide.
cordialement.

[Salvialf]

Salut,

@michael

l’utilise un fichier javascript que j’importe de cette manière dans mon widget:

Quel suspense…

Quoi qu’il en soit, voici une manière fonctionnelle d’inclure un fichier js dans un widget :

$.include(['plugins/#plugin_id#/core/template/js/#file_name#.js'], function() {
  // ton code
})

Il faut bien sûr adapter et le chemin et les termes entre dièses avec les infos adéquates.

[michael]

Bonjour @Salvialf ,
Merci de ta réponse, cependant la manière d’inclure ton fichier est fait avec Jqwery,(d’où le $)
à terme Jqwery ne sera plus disponible avec Jeedom, même si ce n’est pas pour demain, mais uniquement pure JS et quelque fonctions qui se trouvent dans dom.utils.js et dom.ui.js, je souhaite donc me passer complètement de jqwery.
merci

[Salvialf]

Je me suis justement fait la même réflexion hier en te répondant, je vais regarder

[Phpvarious]

Bonsoir,

Peut-être comme ceci :

<script src="core/php/getJS.php?file=plugins/#plugin_id#/core/template/js/#file_name#.js"></script>

[michael]

cela ne fonctionne pas non plus.
Par contre en mettant un timeout et un import de fichier standard cela fonctionne de cette sorte:

if (typeof(#nomfonction#) == « function »){
APPEL DES FONCTIONS
}
setTimeout(() => {
APPEL DES FONCTIONS
}, 500);
il y a un contrôle si une des fonctions qui se trouvent dans le fichier javascript existe, comme cela lors de la mise à jour du widget on ne passe plus par le timeout, par contre si elle n’existe pas, (lors du rafraichissement de la page), on attend 500ms pour appeler les fonctions. j’ai testé avec 100ms, cela fonctionne aussi

[Phpvarious]

Question bête , ton import js est bien fait avant l’appel des fonctions ?

[noodom]

Helloo,

Et avec DOMContentLoaded ?

document.addEventListener(« DOMContentLoaded », function() {
fonctionDuScriptJs();
});

[Phpvarious]

Hello,

Etonnamment, le EventListener ne se déclenche jamais sur le DOMContentLoaded !
Sans doute lié au fonctionnement du Core, le DOMContentLoaded doit intervenir avant l’injection du code des widgets.

Sinon peut-être comme ceci :

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "complete") {
    fonctionDuScriptJs();
  }
})

[Loic]

Bonjour
J’ai plus le nom de la fonction en tete mais il y en a une de mémoire un truc jeedomutils.ready ou du genre qui se déclenche quand le load des scripts est fini

[Phpvarious]

Bonjour Loic,

J’ai regardé mais j’ai seulement trouvé ceci :

jeedom/core/blob/alpha/desktop/common/js/utils.js#L29

Qui permet de réinjecter le contenu d’un script jQuery qui utilise la méthode .ready(), d’ailleur on voit bien que le core utilise aussi une fonction avec un setTimeout pour s’assurer d’injecter le contenu une fois la page chargé.

Donc a ce que je comprend, il faut mieux utiliser un setTimeout.

[Loic]

J’etais sur yavais autre chose je regarde dans ma semaine

[Phpvarious]

Il existe bien aussi un listener jeedom_page_load mais celui-ci intervient que sur la fonction loadPage mais pas au refresh.

[michael]

bonjour, oui il est bien effectué avant l’appel des fonctions

[Salvialf]

Salut,

J’ai eu l’occasion de tester avec mes 2 widgets utilisant une lib js externe et la solution de @Phpvarious fonctionne parfaitement à condition d’utiliser 2 balises <script></script>. La première pour charger le fichier et la seconde pour le code javascript du widget :

<script src="core/php/getJS.php?file=plugins/#plugin_id#/core/template/js/#file_name#.js"></script>
<script>
    // JS code
</script>