Insérer du javascript avec Encode

Version imprimable

Bonjour,

Etant donné que je voudrais insérer du javascript dans mes templates, j'étudie le pack Encode. J'ai lu la documentation, mais je ne m'en sors pas.

Pour faire un essai, je tente simplement d'afficher une alerte à la fin du chargement de mon template. Voici donc les différents codes :

Dans monsite\assets\js\addAdvert.js :
Code:

1 2 3 function essai() { alert("Coucou"); }
Dans webpack.config.js :

Code:

.addEntry('addAdvert', './assets/js/addAdvert.js')

Dans mon template de base, dans la balise <body> :
Code:

1 2 3 4 5 6 {% block javascripts %} {{ encore_entry_script_tags('app') }} 
Dans le template final, avant la srucharge du body :
Code:

1 2 3 4 {% block javascripts %} {{ parent() }} {{ encore_entry_script_tags('addAdvert') }} {% endblock %}
En fin de template final :

Code:

<script type="text/javascript" >essai();</script>

Je m'attendais à ce que la fonction essai() fasse référence à celle contenue dans mon fichier addAdvert.js, mais ce n'est pas le cas.

Pourriez-vous m'indiquer comment, depuis mes templates, je peux faire appel aux fonctions comprises dans mes fichier js?

Merci d'avance.

03/12/2018, 00h27
Watilin

Bonsoir,
que vois-tu quand tu examines le code HTML généré en faisant Ctrl+U dans ton navigateur ? Les balises script sont-elles dans l’ordre attendu ?
Également, ouvre le panneau d’outils avec F12, active l’onglet console et regarde s’il y a des messages d’erreur.

1 pièce(s) jointe(s)

Bonjour,

Merci beaucoup pour ta réponse... nocturne!

Dans le code généré, je retrouve bien les balises attendues dans mon body :
Code:

1 2 3 4 5 <script src="/build/runtime.js"></script><script src="/build/app.js"></script> ... <script src="/build/addAdvert.js"></script> ... <script nonce="e19349491f508e83a5af6492651d6a5d">/*<![CDATA[*/ (function () { Sfjs.loadToolbar('084b77'); })();/*]]>*/</script>
Par contre, le contenu de ma dernière balise script me semble bizarre, mais c'est peut-être normal?

Dans la console, voici le message d'erreur que j'obtiens :

Pièce jointe 431808

Merci pour ton aide et ta transmission d'utilisation de commandes que je ne connaissais pas et qui sont bien pratiques ;)

03/12/2018, 13h18
Watilin
Le Sfjs.loadToolBar est normal, c’est le script qui initialise la Web Debug Toolbar de Symfony.

Quant à notre problème, ce que je constate, c’est que :
1. ton script addAdvert.js est bien présent dans la page ;
2. ton script qui appelle essai() est présent lui-aussi, on peut le voir au message d’erreur qu’il provoque.
La seule explication que je peux donner, c’est que ces deux scripts ne sont pas chargés dans le bon ordre : l’appel à essai() est fait avant que cette fonction soit déclarée. À ce que je vois, l’appel se trouve ligne 96 dans ta page. Le script addAdvert.js se trouve-t-il avant ou après ?

Merci beaucoup pour ton intérêt et ton suivi!

D'après moi, je tente de faire les appels dans le bon ordre étant donné que, dans le code généré je trouve d'abord

Code:

<script src="/build/addAdvert.js"></script>

qui devrait charger mon fichier addAdvert.js dans lequel, jusqu'à présent, je n'ai que ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["addAdvert"],{ /***/ "./assets/js/addAdvert.js": /*!********************************!*\ !*** ./assets/js/addAdvert.js ***! \********************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { var addAdvert = __webpack_require__(/*! ./addAdvert */ "./assets/js/addAdvert.js"); function essai() { alert("Coucou"); } /***/ }) },[["./assets/js/addAdvert.js","runtime"]]]); //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvanMvYWRkQWR2ZXJ0LmpzIl0sIm5hbWVzIjpbImFkZEFkdmVydCIsInJlcXVpcmUiLCJlc3NhaSIsImFsZXJ0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxJQUFJQSxTQUFTLEdBQUdDLG1CQUFPLENBQUMsNkNBQUQsQ0FBdkI7O0FBRUEsU0FBU0MsS0FBVCxHQUFpQjtBQUNiQyxPQUFLLENBQUMsUUFBRCxDQUFMO0FBQ0QsQyIsImZpbGUiOiJhZGRBZHZlcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgYWRkQWR2ZXJ0ID0gcmVxdWlyZSgnLi9hZGRBZHZlcnQnKTtcclxuXHJcbmZ1bmN0aW9uIGVzc2FpKCkgeyAgICBcclxuICAgIGFsZXJ0KFwiQ291Y291XCIpO1xyXG4gIH0iXSwic291cmNlUm9vdCI6IiJ9
Ensuite seulement, je fais appel à la fonction essai() via

Code:

<script nonce="e19349491f508e83a5af6492651d6a5d">/*<![CDATA[*/ (function () { Sfjs.loadToolbar('084b77'); })();/*]]>*/</script>

.

03/12/2018, 14h38
Watilin
Ah oui d’accord, c’est une histoire de modules. Regarde bien ce qui se passe ici :
Code:

1 2 3 4 5 6 7 8 9 function(module, exports, __webpack_require__) { ... function essai() { alert("Coucou"); } }
Ta fonction essai, ici en rouge, est déclarée dans la portée de la fonction bleue. Comme une variable déclarée avec var, elle est locale à la fonction bleue, et donc elle ne se trouve pas dans le contexte global.

Le problème est que tu ne peux pas utiliser les modules dans un script embarqué, c’est-à-dire une balise <script> sans src. Je crois que tu vas être obligé de mettre ton appel à essai dans le app.js. Et pour que ça marche, il faut d’abord exporter la fonction essai :
fichier addAdvert.js
Code:

1 2 3 module.exports = function essai() { alert("Coucou"); };
Et l’importer dans le module principal :
fichier app.js
Code:

1 2 3 4 5 var essai = require('./addAdvert'); ... essai();
La doc : Requiring JavaScript Modules et aussi : Cours et tutoriels pour apprendre JavaScript

Merci...

Cependant, je rame toujours :(

Voici ce que j'ai maintenant dans buil/app.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["app"],{
 
/***/ "./assets/css/app.css":
/*!****************************!*\
  !*** ./assets/css/app.css ***!
  \****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
 
// extracted by mini-css-extract-plugin
 
/***/ }),
 
/***/ "./assets/js/addAdvert.js":
/*!********************************!*\
  !*** ./assets/js/addAdvert.js ***!
  \********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
 
var addAdvert = __webpack_require__(/*! ./addAdvert */ "./assets/js/addAdvert.js");
 
module.exports = function essai() {
  alert("Coucou");
};
 
/***/ }),
 
/***/ "./assets/js/app.js":
/*!**************************!*\
  !*** ./assets/js/app.js ***!
  \**************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
 
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */
// any CSS you require will output into a single css file (app.css in this case)
__webpack_require__(/*! ../css/app.css */ "./assets/css/app.css");
 
var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js"); // import the function from greet.js (the .js extension is optional)
// ./ (or ../) means to look for a local file
 
 
var greet = __webpack_require__(/*! ./greet */ "./assets/js/greet.js");
 
var addAdvert = __webpack_require__(/*! ./addAdvert */ "./assets/js/addAdvert.js");
 
module.exports = function (name) {
  return "Hello ".concat(name, ", have a nice day!");
}; //$(document).ready(function() {
//$('body').prepend('<h1>'+greet('jill')+'</h1>');
//});

Dans asset/addAdvert.js :

Code:

1
2
3
4
5
var addAdvert = require('./addAdvert');
 
module.exports = function essai() {
  alert("Coucou");
};

Et dans buid/addAdvert.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["addAdvert"],{
 
/***/ "./assets/js/addAdvert.js":
/*!********************************!*\
  !*** ./assets/js/addAdvert.js ***!
  \********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
 
var addAdvert = __webpack_require__(/*! ./addAdvert */ "./assets/js/addAdvert.js");
 
module.exports = function essai() {
  alert("Coucou");
};
 
/***/ })
 
},[["./assets/js/addAdvert.js","runtime"]]]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvanMvYWRkQWR2ZXJ0LmpzIl0sIm5hbWVzIjpbImFkZEFkdmVydCIsInJlcXVpcmUiLCJtb2R1bGUiLCJleHBvcnRzIiwiZXNzYWkiLCJhbGVydCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsSUFBSUEsU0FBUyxHQUFHQyxtQkFBTyxDQUFDLDZDQUFELENBQXZCOztBQUVBQyxNQUFNLENBQUNDLE9BQVAsR0FBaUIsU0FBU0MsS0FBVCxHQUFpQjtBQUNoQ0MsT0FBSyxDQUFDLFFBQUQsQ0FBTDtBQUNELENBRkQsQyIsImZpbGUiOiJhZGRBZHZlcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgYWRkQWR2ZXJ0ID0gcmVxdWlyZSgnLi9hZGRBZHZlcnQnKTtcclxuXHJcbm1vZHVsZS5leHBvcnRzID0gZnVuY3Rpb24gZXNzYWkoKSB7XHJcbiAgYWxlcnQoXCJDb3Vjb3VcIik7XHJcbn07Il0sInNvdXJjZVJvb3QiOiIifQ==

Et dans mon asset\app.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */
 
// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');
 
var $ = require('jquery');
 
// import the function from greet.js (the .js extension is optional)
// ./ (or ../) means to look for a local file
var greet = require('./greet');
var addAdvert = require('./addAdvert');
 
module.exports = function(name) {
    return `Hello ${name}, have a nice day!`;
  };
 
//$(document).ready(function() {
    //$('body').prepend('<h1>'+greet('jill')+'</h1>');
//});

03/12/2018, 15h23
armel18
c'est un problème de scope. en fait webpack embarque tous les scripts sous forme de modules dont la portée est limité qu'au sein de l'objet webpack pour peu qu'on ait fait export de chaque module. Dans l'exemple suivant tu ne peux pas appelé hello() depuis l'exterieur de la fonction englobante.
Code:

1 2 3 4 5 6 7 $(function() { function helllo(){ alert( "hello world") } });
si tu veux casser le scope de webpack tu peux utiliser soient des arrows functions ( =>) ou des fonctions anonymes:
Code:

1 2 3 4 essai = () => { alert("Coucou"); };
et puis dans template:
Code:

1 2 <script type="text/javascript" >essai();</script>
Après je me demande pourquoi tu veux écrire du js dans les vues sauf si tu veux inclure des libs comme jquery que tu souhaites rendre visibles.
03/12/2018, 15h44
dubitoph
Au final, ce que désire faire, c'est ajouter des entités (photos) à la volée par un bouton "Ajout" dans mon formulaire d'encodage d'une annonce. J'ai donc lu que je devrai utiliser du javascript dans mon template pour y arriver. Voilà pourquoi que ;)...

Par contre, je ne comprends pas trop : je ne sais pas accéder au javascript d'Encore sans en casser la logique? Ou bien je dois utiliser l'objet webpack dans mon template? Je ne le fais pas en déclarant ceci? :
Code:

1 2 3 4 {% block javascripts %} {{ parent() }} {{ encore_entry_script_tags('addAdvert') }} {% endblock %}
03/12/2018, 16h14
Watilin

Casser la logique du framework, ça ne me paraît pas une bonne idée. Les logiques mises en place par un framework sont là pour une bonne raison.

Je te conseille de créer d’abord un formulaire entièrement fonctionnel sans JavaScript, et d’ensuite ajouter du JS pour l’enrichir, sur le principe de l’amélioration progressive.

Commence par construire un formulaire minimal avec envoi de fichier en suivant la doc Symfony.
Ensuite, tu pourras ajouter le JS. Sache qu’il y a toujours moyen de faire sans les scripts embarqués, et sans les attributs onmachin, ontruc, etc. Tu manipules des références sur les éléments de la page avec jQuery ou avec les fonctions natives querySelector et querySelectorAll.
03/12/2018, 16h21
dubitoph

C'est ce que j'avais fait. Dans mon template qui fonctionnait bien, j'ai cherché à insérer du javascript tout simple avant d'aller plus loin, en voulant me baser sur de bonnes pratiques, ce pourquoi j'ai tenté d'utiliser le webpack encore afin de centraliser mon js. Mais là, je commence vraiment à galérer. Peut-être vais-je abandonner l'idée d'utiliser le webpack car ça me semble vachement compliqué...
03/12/2018, 16h45
armel18
Pour lancer ta fonction essai() tu l'appelles depuis le fichier addAdvert.js:
Code:

1 2 3 4 5 6 7 //monsite\assets\js\addAdvert.js function essai() { alert("Coucou"); } essai(); // on lance l'exécution de la fonction en l'appelant
Donc il n y a aucune raison d'appeler essai() depuis une vue et ceci n'a rien avoir avec sf4 dans la mesure où le fichier js est déjà lié à la vue.
03/12/2018, 17h41
dubitoph

Je ne comprends pas ce que tu tentes de m'expliquer :(... Mon but est de rassembler toutes les fonctions javascript liées à un template dans un seul et même fichier js afin de faciliter la maintenance.
03/12/2018, 21h49
Watilin

Pourquoi pas le fichier app.js ? Tu n’aurais même pas besoin d’exports.
03/12/2018, 23h30
dubitoph

Je n'y comprends rien, désolé... Le fichier app.js centraliserait toutes mes fonctions js? Dans ce cas, comment faire appel à celles-ci depuis un template? Pour moi, le problème reste entier... Tout à l'air de bien fonctionner au niveau de l'import de mes fichiers js dans le template. Selon moi, c'est la synthaxe pour appeler une fonction se trouvant dans l'un deux qui me manque... Enfin, c'est ce que j'en conclus mais je n'en suis pas certain :)

je reprends l’exemple donné dans la doc Requiring JavaScript modules :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // assets/js/app.js // ... // loads the jquery package from node_modules var $ = require('jquery'); // import the function from greet.js (the .js extension is optional) // ./ (or ../) means to look for a local file var greet = require('./greet'); $(document).ready(function() { $('body').prepend('<h1>'+greet('jill')+'</h1>'); });
Ici ils appellent leur fonction greet, mais tu peux faire sans :
Code:

1 2 3 4 5 6 7 8 9 // assets/js/app.js // ... // loads the jquery package from node_modules var $ = require('jquery'); $(document).ready(function() { $('body').prepend('<h1>Bonjour dubitoph</h1>'); });
Et si tu ne veux pas utiliser jQuery :
Code:

1 2 3 4 5 6 // assets/js/app.js // ... document.addEventListener('DOMContentLoaded', function () { document.body.insertAdjacentHTML('afterbegin', '<h1>Bonjour dubitoph</h1>'); });
J’ai l’impression que tu n’es pas à l’aise avec JS, même en mettant de côté les histoires avec Webpack et Encore. Ne serait-il pas plus simple que tu fasses un prototype sans PHP, avec un fichier pur HTML et un fichier pur JS ?

04/12/2018, 00h15
dubitoph

Si j'ai fait pas mal de trucs en javascript (AJAX) + php... il y a bien longtemps... Donc, pas besoin de passer par du html... Je ne comprends simplement pas les appels à effectuer vers Encore