Insérer du javascript avec Encode

**dubitoph** · 02/12/2018, 20h41

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 :

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

1
2
3
function essai() {    
    alert("Coucou");
  }

Dans webpack.config.js :

Code :

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

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

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

Code :

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

1
2
3
4
5
6
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
 
            <!-- Renders app.js & a webpack runtime.js file
            <script src="/build/runtime.js"></script>
            <script src="/build/app.js"></script> -->

Dans le template final, avant la srucharge du body :

Code :

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

1
2
3
4
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('addAdvert') }}
{% endblock %}

En fin de template final :

Code :

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

<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.

**Watilin** · 03/12/2018, 00h27

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.

**dubitoph** · 03/12/2018, 11h03

Bonjour,

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

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

Code :

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

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 :

Nom : Capture.JPG
Affichages : 859
Taille : 13,1 Ko

Nom : Capture.JPG
Affichages : 859
Taille : 13,1 Ko

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

**Watilin** · 03/12/2018, 13h18

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 :

ton script addAdvert.js est bien présent dans la page ;
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 ?

**dubitoph** · 03/12/2018, 14h06

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 :

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

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

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

Code :

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
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 :

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

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

.

**Watilin** · 03/12/2018, 14h38

Ah oui d’accord, c’est une histoire de modules. Regarde bien ce qui se passe ici :

Code JS :

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

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 JS :

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

1
2
3
module.exports = function essai() {
  alert("Coucou");
};

Et l’importer dans le module principal :
fichier app.js

Code JS :

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

1
2
3
4
5
var essai = require('./addAdvert');
 
...
 
essai();

La doc : Requiring JavaScript Modules et aussi : Cours et tutoriels pour apprendre JavaScript

**dubitoph** · 03/12/2018, 15h02

Merci...

Cependant, je rame toujours

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

Code :

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
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 :

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

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

Et dans buid/addAdvert.js :

Code :

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
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==

**dubitoph** · 03/12/2018, 15h08

Et dans mon asset\app.js :

Code :

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
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>');
//});

**armel18** · 03/12/2018, 15h23

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 :

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

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 :

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

1
2
3
4
 
essai = () => {
  alert("Coucou");
};

et puis dans template:

Code :

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

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.

**dubitoph** · 03/12/2018, 15h44

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 :

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

1
2
3
4
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('addAdvert') }}
{% endblock %}

**Watilin** · 03/12/2018, 16h14

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.

**dubitoph** · 03/12/2018, 16h21

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é...

**armel18** · 03/12/2018, 16h45

Pour lancer ta fonction essai() tu l'appelles depuis le fichier addAdvert.js:

Code :

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

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.

**dubitoph** · 03/12/2018, 17h41

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.

**Watilin** · 03/12/2018, 21h49

Pourquoi pas le fichier app.js ? Tu n’aurais même pas besoin d’exports.

**dubitoph** · 03/12/2018, 23h30

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

**Watilin** · 03/12/2018, 23h52

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

Code JS :

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

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 JS :

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

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 JS :

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

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 ?

**dubitoph** · 04/12/2018, 00h15

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

Insérer du javascript avec Encode

ORM PHP

Partager

Partager