IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ORM PHP Discussion :

Insérer du javascript avec Encode


Sujet :

ORM PHP

  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut Insérer du javascript avec Encode
    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.

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    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.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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 : 451
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

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    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 ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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>
    .

  6. #6
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    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
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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==

  8. #8
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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>');
    //});

  9. #9
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2012
    Messages
    612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2012
    Messages : 612
    Points : 1 104
    Points
    1 104
    Par défaut
    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.

  10. #10
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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 %}

  11. #11
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    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.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  12. #12
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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é...

  13. #13
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2012
    Messages
    612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2012
    Messages : 612
    Points : 1 104
    Points
    1 104
    Par défaut
    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.

  14. #14
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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.

  15. #15
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    Pourquoi pas le fichier app.js ? Tu n’aurais même pas besoin d’exports.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  16. #16
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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

  17. #17
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    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 ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  18. #18
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    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

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo