Symfony 6 : path vers controller ignoré depuis JS

Bonjour à tous,

Dans le but d'allèger le nombre de requêtes et aussi de proposer leur lancement seulement au click sur un onglet j'ai fait ce code JS qui marche parfaitement excepté que le TWIG inclus n'est pas interprété en tant qu'html, il m'est renvoyé tel quel dans le contenu de la div "tab-content".

Par exemple au click sur l'onglet le path TWIG est affiché comme du texte : {{render(controller('App\Controller\AvoirsController::index',{id:documentId}))}} au lieu d'apeller le controller en question.

D'ailleurs, si remis dans le template d'origine tout fonctionne à merveille... Il y a donc une partie mal interprétée lors de l'envoi depuis JS...

J'ai essayé en parsant le contenu, rien n'y fait ...

Merci d'avance pour vos lumières

_tabs-ecritures.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% block body %}
    <div class="tabs">
        <input type="radio" class="tabs__radio" name="tabs-ecriture" id="lignes" checked>
        <label for="lignes">Détails</label>
 
        <input type="radio" class="tabs__radio" name="tabs-ecriture" id="acomptes">
        <label for="lignes">Réglements</label>
 
        <input type="radio" class="tabs__radio" name="tabs-ecriture" id="avoirs">
        <label for="lignes">Avoirs</label>
    </div>
 
    <div class="tabs__content"></div>
    {% block javascripts %}
        <script src={{asset('assets/js/TabsEcritures.js')}} type="text/javascript" defer></script>
    {% endblock %}
{% endblock %}

tabsEcritures.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = () => {
  const tabContent = document.querySelector(".tabs__content");
  const radButtons = document.querySelectorAll(".tabs__radio");
 
  radButtons.forEach((rb) =>
    rb.addEventListener("change", (e) => {
      console.log(e.target.id);
      switch (e.target.id) {
        case "lignes":
          tabContent.innerHTML = `<div class="lignes-ecritures">{{render(controller('App\\Controller\\LignesEcrituresController::index',{id:documentId}))}}</div>`;
          break;
        case "acomptes":
          tabContent.innerHTML = `<div class="acomptes-ecriture">{{render(controller('App\\Controller\\AcomptesController::acomptesEcriture',{id:documentId}))}}</div>`;
          break;
        case "avoirs":
          tabContent.innerHTML = `<div class="avoirs-ecriture">{{render(controller('App\\Controller\\AvoirsController::index',{id:documentId}))}}</div>`;
          break;
        default:
          return;
      }
    })
  );
};