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 : 926
Taille : 13,1 Ko

Nom : Capture.JPG
Affichages : 926
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

Insérer du javascript avec Encode

ORM PHP

Vue hybride

Partager

Partager