Discussion :

[clickandgo]

Bonjour à tous,

Dans le code ci-dessous servant à afficher puis paginer avec deux fetch consécutifs, tout marche bien sauf qu'en rappuyant sur un bouton de pagination à la deuxième fois apparaît du JSON au lieu d'afficher la prochaine page...

Je pense donc qu'il doit y avoir une astuce pour que le deuxième fetch imbriqué s’exécute correctement plusieurs fois...

Que fais-je mal ?

Merci d'avance

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
38
39
40
export async function filtrerOnglets(url) {
  try {
    let response = await fetch(url, {
      method: "GET",
      cache: "no-cache",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "Application/json",
      },
    });
    let data = await response.json();
    tabContent.innerHTML = data.content;
    let pagination = document.querySelectorAll(".tabs__content span a");
 
    //filtrage pour pagination
    pagination.forEach((el) => {
      el.addEventListener("click", (e) => {
        e.preventDefault();
        let urlPagination = e.target.getAttribute("href");
 
        async function paginationAjax() {
          let response = await fetch(urlPagination, {
            method: "GET",
            cache: "no-cache",
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Content-Type": "Application/json",
            },
          });
          let data = await response.json();
          tabContent.innerHTML = data.content;
        }
        paginationAjax();
        console.log(urlPagination);
      });
    });
  } catch (error) {
    alert("Erreur " + error);
  }
}

[Dave Hiock]

\ô/
il faudrait que tu nous indiques la structure html des différents éléments et surtout comment et quand est appelée ta fonction filtrerOnglets.

[clickandgo]

Merci d'avoir répondu

La fonction filtrerOnglets() marche parfaitement et comme son nom l'indique exécute un premier fetch qui rempli la div "tabsContent" dont l'adresse est renseignée en tant que dataset-url dans les partials (symfony).

Cette fonction est déclenchée au click sur l'onglet correspondant et aussi automatiquement à l'initialisation de la page...
Elle me permet aussi d'accéder à l'élément du dom "pagination" qui contient tous les links produits par ladite pagination.

Une seconde fonction imbriquée "paginationAjax()" est déclenchée grâce à un addeventListener sur click d'un lien de pagination obtenu à l'aide de l'instruction let urlPagination = e.target.getAttribute("href");.

Ce que je ne comprends pas c'est que tout marche parfaitement la première fois que l'on clique sur un des liens de pagination mais à la deuxième, du json est renvoyé inexplicablement au lieu de rafraichir la page...

Si je console.log(urlPagination) j'ai pourtant bien l'adresse qui change à chaque fois et qui est correcte par rapport au numéro de page et si je fais console.log(data.content) cela me renvoie bien le bon data...

C'est très bizarre car malgré le bon data.content, la div "tabsContent" n'est pas remplie au deuxième click mais si au premier...

J'ai l'impression que cela pourrait venir du controller symfony, je l'ajoute ci dessous on sait jamais...

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
38
39
40
41
export async function filtrerOnglets(url) {
  try {
    let response = await fetch(url, {
      method: "GET",
      cache: "no-cache",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "Application/json",
      },
    });
    let data = await response.json();
    tabsContent.innerHTML = data.content;
    let pagination = document.querySelectorAll(".tabs__content span a");
 
    //filtrage pour pagination
    pagination.forEach((el) => {
      el.addEventListener("click", (e) => {
        e.preventDefault();
 
        let urlPagination = e.target.getAttribute("href");
 
        async function paginationAjax() {
          let response = await fetch(urlPagination, {
            method: "GET",
            cache: "no-cache",
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Content-Type": "Application/json",
            },
          });
          let data = await response.json();                 
          tabsContent.innerHTML = data.content;
        }
        paginationAjax();
        console.log(urlPagination);
      });
    });
  } catch (error) {
    alert("Erreur " + error);
  }
}

controllers :

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
    //Liste des factures
    #[Route('liste-factures', name: 'liste-factures')]
    public function listeFactures(EcrituresRepository $ecrituresRepository, Request $request, PaginatorInterface $paginator): JsonResponse
    {
 
        $donnees = $ecrituresRepository->findBy(['type_document' => 'Facture'], ['created_at' => 'DESC']);
        $ecritures = $paginator->paginate($donnees, $request->query->getInt('page', 1), 10);
 
            return new JsonResponse(['content' => $this->renderView('_partials/_liste-ecritures.html.twig', ['ecritures' => $ecritures])]);
 
    }
 
    //Liste des devis
    #[Route('liste-devis', name: 'liste-devis')]
    public function listeDevis(EcrituresRepository $ecrituresRepository, Request $request, PaginatorInterface $paginator): JsonResponse
    {
        $donnees = $ecrituresRepository->findBy(['type_document' => 'Devis'], ['created_at' => 'DESC']);
        $ecritures = $paginator->paginate($donnees, $request->query->getInt('page', 1), 10);  
 
            return new JsonResponse(['content' => $this->renderView('_partials/_liste-ecritures.html.twig', ['ecritures' => $ecritures])]);
 
    }

[clickandgo]

Bonjour, je reviens sur le sujet car personne n'a répondu encore ...

Alors c'est vraiment bizarre car après tests, la fonction imbriquée renvoie bien le bon data.content à chaque click mais affiche uniquement une page avec du json, sans même le reste du html au second click au lieu de rafraîchir la div "tabsContent".
Ca doit tenir à pas grand chose vu que tout est correct en ce qui concerne le data renvoyé...

[clickandgo]

J'ai trouvé tout seul la réponse après des semaines d'errance: le coupable était 'innerHTML' qui ne permet pas la récursivité car il bloque les listeners après un premier passage, il doit être remplacé par adjacentHTML qui en plus est bien plus sécure voici ce que ça donne pour la pagination :

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
async function filtrerOnglets(url) {
  try {
    let response = await fetch(url, {
      method: "GET",
      cache: "no-cache",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "application/json",
      },
    });
 
    let data = await response.json();
    if (response.ok) {
      tabsContent.innerHTML = "";
      tabsContent.insertAdjacentHTML("afterbegin", data.content);
    } else {
      console.log("Erreur !");
...
 
 //eventlistener sur chaque link de pagination
    boutonsPagination.forEach((el) => {
      el.addEventListener("click", (e) => {
        e.preventDefault();
        let url = e.target.getAttribute("href");
        filtrerOnglets(url);
      });
    });
  } catch (error) {
    alert("Erreur " + error);
  }
    }