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.

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?)

Bon, j'ai fini par trouver. 

Il me manquait ceci dans mon app.js

global.$ = global.jQuery = $;