Discussion :

[clickandgo]

Bonjour à tous,

Quelqu'un saurait-il me dire pour quelle raison le fetch contenu dans le code ci-dessous concatène 2 routes au lieu de se contenter de celle que je lui demande ?

Par exemple pour un acompte la reqûete envoyée par fetch va concaténer la route de la page actuelle à celle spécifiée par le controller AcomptesController, cela donne :

"admin/ecritures/modifier-ecriture/acomptes/acomptes-ecriture" alors que la route correcte est simplement "admin/acomptes/acomptes-ecriture/+ numéro écriture"...

Je ne sais pas si c'est moi qui fait une bourde mais je ne comprends pas pourquoi ce phénomène se produit surtout qu'il existe un controller pour les écritures et un autre pour les acomptes, lignes, avoirs etc...

Le but étant de présenter les infos dans des onglets pour alléger les requêtes à l'instant T...

A noter que si je rentre la bonne adresse manuellement dans le fetch j'ai bien la bonne réponse qui s'affiche dans l'onglet actif... incompréhensible !

Merci d'avance pour vos lumières !!!

AcomptesController.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Afficher les lignes d'acomptes pour cette écriture + le total d'acomptes en Ajax
    #[Route('acomptes-ecriture/{id}', name: 'acomptes-ecriture')]
    public function acomptesEcriture(Ecritures $ecritures, AcomptesRepository $acomptesRepository, $id): Response
    {
        $lignes = $acomptesRepository->findBy(['liaison' => $id], ['date_acompte' => 'desc']);
 
        $idEcriture = $ecritures->getId();
 
        $totalAcomptes = $ecritures->getTotalAcomptesEcriture();
 
        return new JsonResponse([
            'content' => $this->renderView('_partials/_acomptes-ecriture.html.twig', compact('lignes', 'totalAcomptes', 'idEcriture'))
        ]);
    }

TabsEcriture.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
window.onload = () => {
  const tabContent = document.querySelector(".tabs__content");
  const radButtons = document.querySelectorAll(".tabs__radio");
 
  radButtons.forEach((rb) =>
    rb.addEventListener("change", (e) => {
      let url = "";
      switch (e.target.id) {
        case "lignes":
          url = "lignes-ecriture";
          break;
 
        case "acomptes":
          url = "acomptes-ecriture";
          break;
 
        case "avoirs":
          url = "avoirs-ecriture";
          break;
        default:
          return;
      }
      fetch(url, {
        method: "GET",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "Content-Type": "Application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          tabContent.innerHTML = data.content;
        })
        .catch((error) => alert("Erreur : " + error));
    })
  );
};

[Pytet]

Bonjour,

L'URL renseignée est une URL relative.

Renseigne une URL absolue en commençant par un / initial : url = "/admin/acomptes/acomptes-ecriture";

[clickandgo]

Merci Pytet, c'était bien le manque de "/" qui provoquait l'erreur ...

Maintenant je bute sur comment récupérer en JS la valeur de la variable idEcriture que j'envoie depuis le controller car je pense qu'on en a besoin pour ajouter à la fin de la route spécifiée dans le fetch ...

Pour l'instant je rentre un numéro à la main et ça renvoie bien les bonnes infos...

Merci de ton aide

[Pytet]

Dans la vue où tu génères les input radio, tu peux stocker l'identifiant dans un attribut html data-id de l'input puis le récupérer en js juste avant de faire la requête via fetch :
https://symfony.com/doc/current/fron...rver-data.html

[clickandgo]

Merci mille fois, tout marche à merveille !

Grâce à vos conseils

Voici ce que j'ai fait :

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
{% block body %}
	{% set idEcriture = formEcritures.vars.value.id %}
 
	<div class="tabs">
		<input type="radio" class="tabs__radio" name="tabs-ecriture" id="lignes" checked data-url="{{path('ecritures_lignes-ecriture',{id:idEcriture})}}">
		<label for="lignes">Détails</label>
 
		<input type="radio" class="tabs__radio" name="tabs-ecriture" id="acomptes" data-url="{{path('acomptes_acomptes-ecriture',{id:idEcriture})}}">
		<label for="lignes">Réglements</label>
 
		{% if formEcritures.vars.value.typedocument =="Facture" %}{
 
			<input type="radio" class="tabs__radio" name="tabs-ecriture" id="avoirs" data-url="{{path('avoirs_avoirs-facture',{id:idEcriture})}}">
			<label for="lignes">Avoirs</label>
 
			}
 
		{% endif %}
	</div>
 
	{% autoescape 'js' %}
		<div class="tabs__content"></div>
	{% endautoescape %}
 
	{% block javascripts %}
		<script src={{asset('assets/js/TabsEcritures.js')}} type="text/javascript" defer></script>
	{% endblock %}
{% endblock %}

puis en 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
window.onload = () => {
  const tabContent = document.querySelector(".tabs__content");
  const radButtons = document.querySelectorAll(".tabs__radio");
 
  radButtons.forEach((rb) =>
    rb.addEventListener("change", (e) => {
      const url = e.target.dataset.url;
 
      fetch(url, {
        method: "GET",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "Content-Type": "Application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          tabContent.innerHTML = data.content;
        })
        .catch((error) => alert("Erreur : " + error));
    })
  );
};