Discussion :

[Mopige]

Bonjour,

Configuration actuelle
Version de WordPress : 5.2.2
Adresse du site : la version test est en local. Wampserver 3.1.0 64 bit x64
PHP 5.6.31, 7.0.23, 7.1.9 / MySQL 5.7.19
Thème utilisé : Twenty Sixteen

Je développe en local une nouvelle version du site http://coutglobal.fr/ avec WordPress, avant de la placer en ligne. Le site est essentiellement constitué de pages car il renferme beaucoup de contenu. De plus il permettra de mettre en ligne une application très utile pour l'analyse de risque dans les projets d'investissement. Cette application, qui fonctionne parfaitement, se trouve actuellement à l'adresse http://coutglobal.fr/SimuRisque/somRisq.html, en attendant d'être intégrée au site. Cette application contient du html et du javascript, dont un formulaire fait appel à un fichier php.

Code html :

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

<form action="simuRisq-b.php" method="post" name="lesva" target="_blank">

Mon problème : j'ajoute une page dans le site WP dans laquelle je copie intégralement le code source du fichier somRisque.html mentionné ci-dessus. La page affiche alors une copie identique à celle du fichier initial. En revanche, les boutons "Ajouter" et "Valider" n'appellent pas les scripts JS qui sont placés au début du fichier, alors que ces mêmes boutons fonctionnent dans le code initial.

En regardant plus attentivement le code créé par WP après le copier-coller, j'ai constaté que de nombreuses instructions JS ont été placées entre les balises <p> et </p> ce qui, je suppose, les transforme en html. Si cette remarque est correcte, il est normal que les boutons "Ajouter" et "Valider" restent muets. J'ai reproduit cet ajout dans le fichier somRisq.html mentionné ci-dessus, dans la déclaration de la variable "tableau".

Code js :

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

1
2
3
4
5
function ajouterLigne() {
	// déclaration des variables
	var oInput; var oRow; var oCell; var oText;
	var ind;
	<p>var tableau = document.getElementById("tablo");</p>

Le bouton Ajouter ne répond plus, alors qu'il fonctionne sans les balises.

Il semble donc que le copier-coller dans WP d'un fichier html contenant du JS modifie le code JS en y ajoutant des balises supplémentaires qui le rendent inopérant. Comment faire alors pour récupérer du code existant?

Ce constat est confirmé par le fait que le bouton Simulation, qui n'appelle pas de JS, fonctionne correctement. Il appelle un fichier php que j'ai placé dans le thème enfant en plus des fichiers "style.css" et "functions.php". Mais il affiche une page (*) contenant le message suivant :

Oups ! Cette page est introuvable

. Si je place le fichier dans le répertoire principal (cgrisq), j'obtiens le même message. Où dois-je placer le fichier php pour qu'il le trouve?

(*) http://localhost:8000/cgrisq/page-d-...simuRisq-b.php

Ce message étant très long, je résume ici les 2 problèmes.
1/ Le copier-coller d'un code html contenant du JavaScript introduit des balise <p>…</p> dans le script JS qui le rendent inopérant. Les boutons des formulaires ne répondent donc pas.
2/ Le bouton du formulaire qui appelle le fichier php répond bien car il n'est pas dans les scripts JS. Cependant, il ne trouve pas le fichier php. Où dois-je le placer?

Merci pour votre aide qui me serait plus qu'utile, indispensable.

[kevin254kl]

Salut,

L'éditeur markdown va interpréter ton code js comme du texte d'ou le placement dans des balises de ton js. Il-y a une bonne pratique https://www.thibautsoufflet.fr/charg...ans-wordpress/

[Mopige]

Même message que le précédent avec un meilleur affichage du code intermédiaire

Bonjour,
Merci pour ta réponse. Après une interruption involontaire et plusieurs essais infructueux, je reviens sur mon problème qui n'est toujours pas résolu.
J'ai suivi la démarche indiquée à l'adresse https://www.thibautsoufflet.fr/charg...ans-wordpress/

Dans le répertoire wp-content/themes/theme-enfant/ j'ai placé un fichier essai1.js contenant le code suivant:

Code js :

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

1
2
3
4
5
function creerTab(f) {
	document.write("bonjour <br>");
	var nCo = f.nbVa.value;
	document.write("Nbre de VA : " + nCo);
}

Dans le fichier functions.php, placé dans le même répertoire, j'ai ajouté le code suivant :

Code :

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

1
2
3
4
5
6
7
8
function add_script1() {  // enqueue script 
	wp_enqueue_script (
	'my_script',
	get_template_directory_uri().'/js/essai1.js',
	array (),
	true );
}	
add_action( 'wp_footer', 'my_script' );

Et dans une nouvelle page nommée "essais"du site WP, j'ai placé le code html suivant :

Code html :

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

1
2
3
4
5
<script type="application/javascript" src="essai1.js"></script>
&nbsp;
<form method="post" name="somRisk">Nombre de variables <input name="nbVa" type="text">
<input name="lancer" type="button" value="valider">
</form>&nbsp;

En cliquant sur le bouton "valider" rien ne se passe et j'obtiens le message suivant dans la console :

Le script à l’adresse « http://localhost:8000/cgrisq/essais/essai1.js » a été chargé alors que son type MIME (« text/html ») n’est pas un type MIME JavaScript valide.
Échec du chargement pour l’élément <script> dont la source est « http://localhost:8000/cgrisq/essais/essai1.js ».

A noter que le code html placé dans la page "essais" qui appelle le script fonctionne parfaitement lorsqu'il est exécuté hors WordPress (voir ci-dessous).

Merci encore de bien vouloir m'aider à trouver l'erreur.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
	<title>Somme de variables uniformes indépendantes</title>
	<script type="application/javascript" src="essai1.js"></script>
	<meta http-equiv="Resource type" content="document"><!-- Fin de la section d'en-tete du document -->
 
</head>
<body>
	<form name="somRisk" method="post">
	Nombre de variables <input type="text" name="nbVa">  <br>
	<input type="button" name="lancer" value="valider" onclick="creerTab(somRisk)"> <br>
								<!-- value = libellé du button-->
	</form>
 
</body>
</html>

Code js :

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

1
2
3
4
5
function creerTab(f) {
	document.write("bonjour <br>");
	var nCo = f.nbVa.value;
	document.write("Nbre de VA : "+nCo);
}

[mathieu]

la fonction "wp_enqueue_script" s'occupe déjà de créer la balise "script" pour charger le fichier JavaScript.

dans le code de votre message vous appelez la fonction "my_script" alors qu'elle s'appelle "add_script1".
ensuite, regardez le code source de la page générée par wordpress pour vérifier que vous le voyez bien.

[Mopige]

Bonjour,

Merci pour vos conseils qui m'ont permis de déboguer l'exemple simple que j'utilisais pour définir la démarche à suivre.
Cependant je tourne en rond depuis plusieurs jours sans arriver à l'appliquer à ma page du site qui est bien sûr beaucoup plus compliquée que cet exemple.
Pour m'aider, je souhaite utiliser la procédure de débogage (présentée sur le site https://codex.wordpress.org/fr:D%C3%...dans_WordPress) qui consiste à insérer le code suivant dans le fichier wp-config.php

Code :

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

1
2
3
4
5
6
7
8
9
// Activer le mode WP_DEBUG
define('WP_DEBUG', true);
// Activer l'enregistrement de débogage dans le fichier /wp-content/debug.log
define('WP_DEBUG_LOG', true);
// Désactiver l'affichage des erreurs et des alertes 
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors',0);
// Utiliser les versions de dev des fichiers JS et CSS du noyau (nécessaire seulement si vous modifiez ces fichiers)
define('SCRIPT_DEBUG', true);

J'ai bien placé ces lignes dans le fichier wp-config.php mais la page se bloque à l'exécution (normal s'il y a un bogue) et il ne se passe rien. En particulier, il n'y a pas de fichier debug.log dans le répertoire wp-content. J'en ai créé un avec WordPad, mais après exécution de la page, il ne contient aucune information.
Cette procédure de débogage est-elle toujours valable. Existe-t-il un autre moyen pour déboguer du code placé dans une page WP.

Merci de me faire profiter de vos conseils pour que je puisse enfin sortir de ce blocage.

[mathieu]

il vaut mieux enlever les 2 lignes après "Désactiver l'affichage des erreurs" comme ça vous verrez directement les erreurs dans le navigateur.

[Mopige]

Bonjour,
J'ai supprimé les 2 lignes

Code :

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

define('WP_DEBUG_DISPLAY', false); @ini_set('display_errors',0);

mais cela ne change rien, aucun message d'erreur n'apparait nulle part.
Pour tester la procédure de débogage, j'ai introduit une erreur dans l'exemple simple présenté précédemment. Il se plante mais n'affiche pas de message d'erreur.

[Invité]

Bonjour,

Code :

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

1
2
3
// ACTIVER l'affichage des erreurs et des alertes 
define('WP_DEBUG_DISPLAY', true);
@ini_set('display_errors',1);

[Mopige]

Bonjour,

Je résume le problème dans son état actuel.
En suivant les conseils reçus en réponse à mes questions, j'ai réussi à insérer du code JavaScript dans une page de mon site WP, et je remercie les personnes qui m'ont aidé. Il reste cependant deux problèmes.

1/ Je souhaite utiliser la procédure de débogage (présentée sur le site https://codex.wordpress.org/fr:D%C3%...dans_WordPress) comme indiqué dans mon message du 14/10, mais ça ne marche pas. J'ai bien supprimé 2 lignes de la procédure comme cela m'a été conseillé lundi 14, mais ça ne marche toujours pas. Que puis-je faire pour que cette procédure fonctionne?

2/ Le code JavaScript que j'ai inséré dans ma page WP appelle un fichier PHP qui effectue de la simulation de Monte-Carlo. Ce logiciel fonctionne correctement hors site à l'adresse "http://coutglobal.fr/SimuRisque/somRisq.html". En lançant l'exécution, j'obtiens le commentaire suivant: "Oups ! Cette page est introuvable". Je profite de ce message pour poser une 2ème question: où placer le fichier PHP? Il est actuellement dans le répertoire principal du site "cgrisq/simuRisq.php".

Merci pour vos conseils