Discussion :

[K.reen]

Bonjour,

Je cherche à afficher le résultat d'un formulaire sur un diagramme circulaire.
J'ai donc construit un fichier .js pour construire le graphe qui fonctionne parfaitement en local :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<canvas id="pie" width="800" height="500"></canvas>
<script  src="./camembert.js"></script>

Mais quand j'essaie d'exécuter ce code dans ma fonction php, rien ne s'affiche :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	echo "<canvas id='pie' width='800' height='500'></canvas>";
	echo "<script  src='./camembert.js'></script>";

Donc je me suis dit que je devais d'abord extraire la fonction du fichier JS mais je ne comprends pas comment marche la fonction nécessaire ni même si j'ai utilisé la bonne :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

wp_enqueue_style( 'drawPieChart',  ./'camembert.js', array() );

Est-ce que quelqu'un voit quelque chose dans le code ou dans mon raisonnement qui expliquerait qu'aucun diagramme ne s'affiche ?

Merci d'avance

[mathieu]

si vous utilisez la réécriture d'URL de WordPress vous aurez des URL dans le genre site.com/resultats-2009/analyse-pack-sport.
et donc le chemin src=./camembert.js va cherche le fichier site.com/resultats-2009/camembert.js qui n'existe donc pas.

la 1re chose à voir est si le fichier camembert.js est dans une extension ou dans un thème ?

[K.reen]

J'ai placé le fichier .js au même endroit que le fichier contenant la requete php donc dans le thème.
Ca me semblait logique vu comment le chemin est mentionné.
Mais je ne trouve aucun répertoire "résultats".

[mathieu]

c'est le navigateur qui résout ces chemins relatifs et le navigateur n'a pas accès aux chemins des fichiers sur le serveur, il voit uniquement l'adresse site.com/resultats-2009/analyse-pack-sport.

si vous rangez les fichiers dans un répertoire "js", vous pouvez utiliser ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
add_action("wp_enqueue_scripts", function () {
 
	wp_enqueue_script(
		  "camembert"
		, get_template_directory_uri() . "/js/camembert.js"
	);
 
 
});

ensuite pour vérifier que le fichier est bien chargé, regardez le code source de la page et regardez aussi l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

[K.reen]

Donc reprenons :
J'ajoute le code add_action dans le fichier functions.php ou directement dans ma fonction php ?

Dois-je appeler cette fonction "camembert" avant les echo des balises pour les lancer ou c'est inutile ?

Ensuite, je pourrais sûrement chercher où se trouve le répertoire où je dois déposer le fichier js en inspectant le code source de la page générée...

Merci pour votre aide

[mathieu]

il vaut mieux charger ce fichier javascript seulement quand vous en avez besoin.
comment utilisez vous cette fonction ? dans un shortcode ou dans un template ?

[K.reen]

C'est un shortcode placé dans une page qui lance une fonction implémentée dans fonction.php du thème enfant et faisant appel à d'autres fonctions rassemblées dans un autre fichier php au même endroit.

Donc ça me paraissait logique de placer le fichier js avec ces fichiers php.

[mathieu]

je demandais ça pour la commande de chargement du fichier.
puisque vous utilisez un shortcode, vous pouvez mettre la commande "wp_enqueue_script..." dans le shortcode.

[K.reen]

J'ai donc ajouté dans le shortcode du fichier function.php juste avant l'appel de la fonction de calcul

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
add_action("wp_enqueue_scripts", function () 
	{
		wp_enqueue_script("drawPieChart", get_template_directory_uri() . "/js/camembert.js");
	});

Ce qui doit effectivement mieux fonctionner vu qu'il y a à présent, un espace de la même taille que le diagramme qui s'affiche mais le dessin reste blanc.

Résultat, je suis encore plus perdue, je ne sais pass ce qui cloche ou manque

[mathieu]

vous n'avez pas besoin de "add_action", vous pouvez mettre directement "wp_enqueue_script" au début de la fonction qui génère le résultat du shortcode.

ensuite regardez le code source de la page et cliquez sur le lien du fichier pour voir s'il est bien chargé.

[K.reen]

Donc j'ai remplacé le code par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

wp_enqueue_script("drawPieChart", get_template_directory_uri() . "/js/camembert.js");

Quand je clique sur le lien du fichier dans le code html, j'ai un long fichier dont je n'ai aucune idée du contenu puisqu'aucune des fonctions sensées y être ne s'y trouve.
Et quand je vois le lien url du navidateur, je ne sais pas où il a pu aller le chercher puisqu'après le nom de domaine et avant le chemin du répertoire spécifié, le nom de la page parente du formulaire est entrecalé.

view-source:https://domaine.fr/page-parente/js/camembert.js

Par quel bout prendre le problème ?

[mathieu]

cela ressemble à l'appel "./camembert.js" de votre 1er message. il faut l'enlever et le charger seulement avec "wp_enqueue_script"

[K.reen]

Le html contient le bon chemin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id='pie' width='800' height='500'></canvas><script  src='./js/camembert.js'></script>

Et dans le shortcode, j'ai essayé d'enlever le 1er slash mais ça ne change rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

wp_enqueue_script("drawPieChart", get_template_directory_uri() . "/js/camembert.js");

[mathieu]

il faut l'enlever et le charger seulement avec "wp_enqueue_script"

je parlais d'enlever la balise "script" du code html

[K.reen]

Effectivement ça marche Merci.
Je ne comprends toujours pas ce qui s'est passé puisque lors des 1ères tentatives le chemin n'était pas écrit correctement et à présent, il n'existe plus aucun chemin vers ce fichier js mentionné dans le code source.
D'autant que pendant les 1ers tests infructueux, j'ai vu que le chemin aurait été différent si j'avais utilisé IE9.

Est-ce que je dois ajouter le fichier js ailleurs sur le site pour ce navigateur ?
Est-ce que je dois m'inquiéter de ne plus trouver de trace du chemin utilisé dans le code source de la page ?

En tous les cas merci encore, je peux continuer mon diagramme à présent!

[K.reen]

Rectification, j'ai commencé à ajouter des lignes pour modifier les valeurs du graphe et il a disparu.
J'ai eu beau effacer toutes mes modifications, plus de graphe et toujours pas de fichier js dans le code source ce qui est plus cohérent en même temps.

J'ai essayé de metter un alert("ok"); au début du fichier js et il n'aparrait pas donc retour à la case départ, je ne sais toujours pas quoi faire pour afficher mon diagramme ni à quel niveau ou de quel côté se trouve le problème.