Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Ajax-SF4] load asset javascript

Sujet résolu
    18 juin 2019 à 22:13:24

    Bonjour à tous,

    Je rencontre un tout petit problème mais je tourne en rond sur mes recherches web. 

    J'ai un projet symfony 4, qui utilise donc des assets js. Dans une vue, j'ai un tableau et un import d'un fichier js. 

    <table class="table table-bordered">
    [...]
    </table>
    
    {% block javascripts %}
        <script src="{{ asset('build/detail1.js') }}"></script>
    {% endblock %}

    Ce tableau, il peut être remplacer par un autre, via un ajax (ajax jquery faisant appel à un controller qui retourne un nouveau tableau avec de nouvelles données). Jusque là, tout va bien.

    Etant donnée que j'ai mis à jour le DOM, mon js ne fonctionne plus sur le nouveau tableau. Donc, il faut que mon ajax charge le javascript avec le tableau. Rien d'anormal jusque là.

    Là où je coince, c'est sur cet import du javascript.

    Si je mets la balise script dans le template html que j'utilise pour générer le nouveau tableau

        <tbody>
            $details
        </tbody>
    </table>
    
    <script src="build/detail.js"></script>

    OU si je mets ceci dans le callback de mon appel ajax, je n'ai pas de réaction du javascript.

    $.ajax({
                url: "/artisanProduit/" + objet,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    let tab = response;
                    tab += '<script src="../build/detail.js"></script>';
                
                    $('.tableRendement').html(tab);
                },[...]

    Si je génère la balise script avec son contenu jquery dans le callback de mon appel ajax, (ci dessous), j'ai l'erreur suivante :

    Code

    $.ajax({
                url: "/artisanProduit/" + objet,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    let tab = response;
    
                    tab += '<script>' +
                            '\'use strict\';\n' +
                            'import $ from \'jquery\';' +
                            '$(document).ready(function () {' +
                            [...]
                    $('.tableRendement').html(tab);
                },

    Erreur

    Uncaught SyntaxError: Unexpected identifier
        at DOMEval (jquery.js:124)
        at domManip (jquery.js:5945)
        at jQuery.fn.init.append (jquery.js:6081)
        at jQuery.fn.init.<anonymous> (jquery.js:6175)
        at access (jquery.js:3962)
        at jQuery.fn.init.html (jquery.js:6142)
        at Object.success (detail.js:38)
        at fire (jquery.js:3291)
        at Object.fireWith [as resolveWith] (jquery.js:3421)
        at done (jquery.js:9533)

    Du coup, je me dis que soit l'une de ces solutions est la bonne et je ne perçois pas où doit être corrigé le code.

    Soit je n'ai pas encore trouvé comment faire tout court et malgré mes recherches, je reste dans le flou. Je dois avouer que je ne suis même pas certaines de mes mots clé lors de ma recherche, les résultats ne correspondant pas tout à fait à mon souci.

    Du coup, ma grande question est : comment charger un asset javascript avec le nouveau tableau renvoyé par mon ajax.



    • Partager sur Facebook
    • Partager sur Twitter
      21 juin 2019 à 10:48:03

      Je me permets un petit up car bien que je continues de chercher, je reste coincée. 

      Je ne suis peut-être pas dans la bonne section (sf4?)

      • Partager sur Facebook
      • Partager sur Twitter
        22 juin 2019 à 14:50:37

        Bon, j'ai fini par trouver. 

        Il me manquait ceci dans mon app.js

        global.$ = global.jQuery = $;



        • Partager sur Facebook
        • Partager sur Twitter

        [Ajax-SF4] load asset javascript

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown