Requête Ajax avec fetch concaténe induement les routes !

Version imprimable

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:

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:

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)); }) ); };

22/09/2023, 13h54
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";
22/09/2023, 15h34
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
22/09/2023, 16h33
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

Merci mille fois, tout marche à merveille !

Grâce à vos conseils

Voici ce que j'ai fait :

Code:

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:

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));
    })
  );
};