Mémorisation page d'une pagination

Version imprimable

27/06/2018, 05h29
kizery

Mémorisation page d'une pagination

Bonjour à tous,

J'utilise le plugin suivant pour ajouter une pagination sur mon site (html/css/php) :

https://esimakin.github.io/twbs-pagination/#page-4

Cependant j'ai un souci, quand on est sur la page 2 par exemple, on clique sur une photo pour accéder à une nouvelle page qui présente la photo en grand, puis on fait "précédent" dans le navigateur, et la je reviens à la page 1 systématiquement. Comment faire pour mémoriser la page 2 dans ce cas ?

Merci d'avance !
27/06/2018, 13h02
Watilin
Bonjour !
Voici des indices :
- Les évènements pageshow et pagehide ;
- le localStorage.
Tu verras, c’est pas compliqué à utiliser. ;)

Dans le cas présent, sessionStorage correspond même mieux au besoin, car l’information est spécifique à la page, et tu n’as pas besoin de nettoyer manuellement le storage quand tu n’en as plus besoin.

Attention à ne pas confondre, ça n’a rien à voir avec les sessions des technos serveurs (PHP, etc.) : le concept de « session » ici est un espace de stockage qui existe uniquement côté client, qui persiste lors d’un changement de page via une navigation normale ou via les boutons précédent / suivant, mais qui est détruit lorsqu’on ferme l’onglet ou la fenêtre. Deux pages d’un même site ouvertes dans deux onglets différents n’ont pas le même sessionStorage, et je pense que c’est pratique pour ce que tu veux faire.

Merci beaucoup je vais zyeuter tout ça :D

Je comprends à peut pres le principe de "sessionstorage" mais par contre, à mon niveau limité en javascript, je ne vois pas du tout comment l'appliquer à mon code :(

Code:

1
2
3
4
5
6
7
8
9
10
$('.sync-pagination').twbsPagination({
                      totalPages: parseInt('<?php echo $nombre_pages; ?>') ,
                      visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
                      next: 'Next',
                      prev: 'Prev',
                      onPageClick: function(event, page){
                      var param = 'l=' +page;
                      //fetch content and render here
                      $('#contenu_site').load('affichegallery.php?theme=', param);}});                                                    
            </script>

Voici le code de pagination en question, si jamais quelqu'un aurai une astuce :mrgreen:

Tu as trois choses à gérer :

l’ajout d’un écouteur de pagehide pour mémoriser la pagination quand la page est quittée ;
l’ajout d’un écouteur de pageshow pour agir à l’affichage / réaffichage de la page ;
l’ajout d’une option startPage dans l’initialisation twbsPagination.

Le petit piège étant que pageshow est émis après DOMContentLoaded (je n’ai pas trouvé de spec qui dit ça, mais j’ai lu à plusieurs endroits que ça semblait être tout le temps le cas).

Ainsi, il faut déplacer la création de ta pagination, de la fonction $(document).ready() vers l’écouteur pageshow.
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 window.addEventListener('pagehide', function () { sessionStorage.setItem('pagination', $('.sync-pagination').twbsPagination('getCurrentPage')); }); window.addEventListener('pageshow', function () { let nbPages = parseInt('<?php echo $nombre_pages; ?>'); // si rien dans le sessionStorage, renvoie null // l’opérateur || permet de choisir le 1 comme valeur par défaut let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 ); $('.sync-pagination').twbsPagination({ totalPages : nbPages, visiblePages : nbPages, startPage : memorizedPage, next : 'Next', prev : 'Prev', onPageClick : function (event, page) { // attention paramètre theme non traité let theme = '???'; let param = 'theme=' + theme + '&l=' + page; //fetch content and render here $('#contenu_site').load('affichegallery.php', param); }, }); });

29/06/2018, 06h57
kizery

Merci beaucoup pour ce petit cours :D

Je regarde ça dans la journée et reviens vers vous !

Merci encore.

Bon alors j'ai testé ton code (dont je te remercie encore pour cet effort) :

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
                  window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('getCurrentPage'));
});
 
window.addEventListener('pageshow', function () {
  let nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  // si rien dans le sessionStorage, renvoie null
  // l’opérateur || permet de choisir le 1 comme valeur par défaut
  let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );
 
  $('.sync-pagination').twbsPagination({
    totalPages: parseInt('<?php echo $nombre_pages; ?>') ,
    visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
    startPage    : memorizedPage,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      // attention paramètre theme non traité
      let theme = 'vietnam';
      let param = 'theme=' + theme + '&l=' + page;
 
      //fetch content and render here
      $('#contenu_site').load('affichegallery.php', param);
    },
  });
});

Hélas, quelque chose cloche, cela n'a rien changé. J'arrive sur ma page 1, je clique sur page 2, j'ouvre une photo, je fais précédent, je retourne toujours à la page 1.

Pardon si j'ai mal compris mais, la première partie du code qui dois mémoriser la page active, est t elle chargé à chaque fois que je clique sur un numéro de page ?

En fait, je viens de reprendre mon code, qui maintenant ressemble à ça :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('page'));
});
 
let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );
 
// document.write(memorizedPage);
// document.getElementById("contenu_site" ).innerHTML = memorizedPage;
 
 
 
$(document).ready(function ($) {
  'use strict';
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = '1';
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () {
  var param = 'theme=' + clickedButton + '&l=' + requestedPage;
 
  //fetch content and render here
  $('#contenu_site').load('affichegallery.php', param);
};
 
// appelle le plugin une seule fois
$('.sync-pagination').twbsPagination({
    totalPages   : nbPages,
    visiblePages : nbPages,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      requestedPage = String(page);
      reloadGallery();
    },
});
 
  // ajoute l’écouteur de click sur les deux boutons à la fois
$('#home, #vietnam').click(function () {
    var $thisButton = $(this);
 
  clickedButton = $thisButton.attr('id');
  reloadGallery();
 
  $('#home, #vietnam').css('font-weight', 'normal').css('cursor', 'pointer').attr('disabled', false);
 
  $thisButton.css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  });
});

Je n'ai donc plus qu'une page index.php qui gère tout.

J'ai ajouté les lignes ci-dessous en début du script pour voir ce qui se passe :

Code:

1
2
3
4
5
6
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('page'));
});
 
let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );

En fait, je vois bien memorizedPage = 1 quand j'arrive sur mon site. Cependant, quand je clique sur "page 2" , memorizedPage est toujours égal à 1.

Comment modifier memorizedPage à chaque clique sur un page ?

En fait, pour résumer la situation, j'ai une pagination similaire qui utilise surement du Ajax aussi ==> Si vous allé sur la page 3 par exemple, et que vous faites précédent, vous revenez bien sur la page 2 (ou 1 ou autres selon votre pages précédente).

Hors moi, je reviens toujours à la page du navigateur précédente (je suis sur google, je vais sur mon site, j'arrive sur la page 1, je clique sur page 2, je fais précédent dans mon navigateur, je reviens sur google et moi je voudrais la page 1). Je m'arrache les cheveux :aie:

29/06/2018, 20h30
Watilin

Citation:

Envoyé par kizery

Pardon si j'ai mal compris mais, la première partie du code qui dois mémoriser la page active, est t elle chargé à chaque fois que je clique sur un numéro de page ?

Pas dans l’état, mais relis bien ce que j’ai écrit :

Citation:

Envoyé par Watilin

l’ajout d’un écouteur de pageshow pour agir à l’affichage / réaffichage de la page ;
[…]
Ainsi, il faut déplacer la création de ta pagination, de la fonction $(document).ready() vers l’écouteur pageshow.

Petit rappel, les bouts de script s’exécutent à différents moments par rapport à la façon dont ils sont écrits, et les évènements auxquels ils se rattachent.

:arrow: Les instructions qui se trouvent en dehors de toute fonction (en gros, pour simplifier) sont exécutées au moment où le script est interprété. Dans 90 % des cas (code inclus dans la balise, ou bien attribut src présent mais pas d’attribut async ou defer), ça correspond au moment où la balise <script> est rencontrée par l’analyseur HTML. Si cette balise se trouve dans le <head> ou quelque part au milieu du <body>, le DOM n’est pas complètement prêt à ce moment. C’est pourquoi on utilise la fonction .ready().

:arrow: Le code présent dans .ready() est appelé quand le navigateur émet l’évènement DOMContentLoaded, qui garantit que le DOM est prêt. Ça veut dire que les éléments HTML sur lesquels on veut agir existent tous.

:arrow: Un autre évènement, load, est émis quand toutes les ressources (images, iframes, médias, etc.) de la page ont fini de charger. Ça peut arriver très tard (si les ressources sont lourdes ou s’il y a de la latence) ou à peu près au même moment que DOMContentLoaded. Dans tous les cas, load est émis après.

:arrow: Finalement, pageshow est émis, et comme je l’ai dit précédemment, il semblerait qu’il soit toujours émis après load. Important, si la page est chargée depuis le cache, on ne peut pas être sûrs que DOMContentLoaded et load seront émis. pageshow est notre seule garantie dans ce cas.

Dans ton code, tu as mis l’instruction let memorizedPage = ... en dehors de toute fonction, elle est donc exécutée trop tôt. Tu dois la remettre dans l’écouteur de pageshow comme je l’avais écrit.

Citation:

Envoyé par kizery

Comment modifier memorizedPage à chaque clique sur un page ?

La variable memorizedPage ne sert que pour la création de la pagination, tu n’as pas besoin de la mettre à jour à chaque clic. Le sessionStorage est mis à jour sur pagehide, c’est-à-dire au moment où la page est quittée.

Tu as un problème dans ton code :

Code:

$('.sync-pagination').twbsPagination('page'));

Le message d’erreur n’est pas très explicite :

Citation:

TypeError: data[option] is undefined

Ça veut dire en fait que la méthode 'page' n’existe pas.

Je n’ai pas trouvé de documentation sur les différentes méthodes de ce plugin, mais en regardant dans le code source, on peut obtenir leurs noms :

destroy, show, enable, disable, buildListItems, buildItem, getPages, render, setupEvents, makeHref, makeText, getPageFromQueryString, generateQueryString, getSearchString, getCurrentPage.

J’avais trouvé getCurrentPage dans un exemple de code sur la page esimakin.github.io/twbs-pagination/ que tu as donnée dans ton premier post.

Citation:

Envoyé par kizery

En fait, pour résumer la situation, j'ai une pagination similaire à cette page, qui utilise surement du Ajax aussi

Oui, c’est bien de l’ajax.

Citation:

Envoyé par kizery

Hors moi, je reviens toujours à la page du navigateur précédente (je suis sur google, je vais sur mon site, j'arrive sur la page 1, je clique sur page 2, je fais précédent dans mon navigateur, je reviens sur google et moi je voudrais la page 1). Je m'arrache les cheveux :aie:

C’est une technologie complètement différente de pageshow et pagehide, il s’agit de manipuler l’historique en y ajoutant des entrées qui ne correspondent pas à des pages au sens classique (un fichier envoyé par un serveur).

Je t’invite à lire le guide Manipuler l’historique de l’utilisateur :)

1 pièce(s) jointe(s)

J'ai reussi quelque chose en faisant ça :

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
38
39
$(document).ready(function ($) {
  'use strict';
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = '1';
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () {
  var param = 'theme=' + clickedButton + '&l=' + requestedPage;
 
  //fetch content and render here
  $('#contenu_site').load('affichegallery.php', param);
};
 
// appelle le plugin une seule fois
$('.sync-pagination').twbsPagination({
    totalPages   : nbPages,
    visiblePages : nbPages,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      requestedPage = page;
      location.hash = requestedPage;
 
      reloadGallery();  } 
 
});
 
window.onhashchange = function(){       
    if(location.hash.length > 1)      
        requestedPage = parseInt(location.hash.replace('#','')); // Get hashtag for get times click
    else
        requestedPage= 1;    
 
      reloadGallery();
}

Maintenant j'ai bien le numéro de la page qui s'actualise dans mon URL.

Par exemple j'ai http://localhost/portfolio/#2 quand je suis sur la page 2.

En faisant précédent dans le navigateur j'appel bien reloadGallery(); avec le bon numéro de page en paramètre, et j'ai donc http://localhost/portfolio/#1 maintenant .

Par contre, ma barre de navigation reste à l'état de la page précédente :

Pièce jointe 392793

Je n'arrive pas à gérer le "startPage" pour que celui-ci s'actualise en fonction de "pagerequested"

02/07/2018, 14h22
Watilin

Où sont les écouteurs pageshow et pagehide ? Où est l’option startPage dans l’appel .twbsPagination() ? Je ne peux pas t’aider si tu ne suis pas mes conseils.

Oui mais precedement tu dis

Citation:

"C’est une technologie complètement différente de pageshow et pagehide, il s’agit de manipuler l’historique en y ajoutant des entrées qui ne correspondent pas à des pages au sens classique (un fichier envoyé par un serveur)."

J'ai cru comprendre que je devais partir sur autre chose (et donc la "manipulation" de l'historique, que je ne maîtrise pas non plus...)

Voila mon code à jour, quand dis tu ?
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 38 39 40 41 42 43 44 45 46 47 48 49 50 window.addEventListener('pagehide', function () { sessionStorage.setItem('pagination', $('.sync-pagination').twbsPagination('getCurrentPage')); }); // $(document).ready(function ($) { window.addEventListener('pageshow', function () { 'use strict'; var nbPages = parseInt('<?php echo $nombre_pages; ?>'); var clickedButton = 'home'; var requestedPage = 1; var valeurFiltre = parseInt('<?php echo $_GET['valeurFiltre']; ?>'); $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true); var reloadGallery = function () { var param = 'theme=' + clickedButton + '&l=' + requestedPage; //fetch content and render here $('#contenu_site').load('affichegallery.php', param); }; // appelle le plugin une seule fois $('.sync-pagination').twbsPagination({ totalPages : nbPages, visiblePages : nbPages, next : 'Next', prev : 'Prev', startPage: valeurFiltre, onPageClick : function (event, page) { requestedPage = page; // history.pushState({page}, 'POST PAGINATE', page); history.pushState(null, null, "?valeurFiltre=" + requestedPage); reloadGallery(); } });
En tout cas, je suis toujours bloqué au même point, en l'état, mon URL se met bien à jour en fonction du numéro de page, le bouton précédent du navigateur mets bien à jour l'URL, mais le contenu de ma page ne bouge pas.

Je pensais qu'il y avait une façon "très simple" de dire en js " l'URL que tu as enregistré dans l"historique et qui est justement affiché quand je clique sur précédent, bah tu me la charge stp !" comme si j'avais moi même entré l'adresse en question...

04/07/2018, 21h30
Watilin

Citation:

Envoyé par kizery

Oui mais precedement tu dis

Citation:

"C’est une technologie complètement différente de pageshow et pagehide, il s’agit de manipuler l’historique en y ajoutant des entrées qui ne correspondent pas à des pages au sens classique (un fichier envoyé par un serveur)."

J'ai cru comprendre que je devais partir sur autre chose (et donc la "manipulation" de l'historique, que je ne maîtrise pas non plus...)

D’accord, pardon pour ce malentendu.

Citation:

En tout cas, je suis toujours bloqué au même point, en l'état, mon URL se met bien à jour en fonction du numéro de page, le bouton précédent du navigateur mets bien à jour l'URL, mais le contenu de ma page ne bouge pas.

Je pense que ça va être assez facile à régler. pushstate fonctionne en duo avec l’évènement onpopstate, et actuellement tu n’as pas de code qui gère cet évènement. Il suffit que tu y ajoutes une fonction qui récupère le numéro de page depuis l’URL, et qui recrée la pagination. Tu auras sans doute besoin de la méthode .twbsPagination('destroy') comme expliqué dans la doc du plugin.

Citation:

Je pensais qu'il y avait une façon "très simple" de dire en js " l'URL que tu as enregistré dans l"historique et qui est justement affiché quand je clique sur précédent, bah tu me la charge stp !" comme si j'avais moi même entré l'adresse en question...

Ça a l’air simple quand ça marche :) En réalité il y a une certaine dose de mécanique à coder soi-même, comme tu peux t’en rendre compte. C’est à cause du fait que pushState crée de « fausses » entrées d’historique — des entrées qui, comme je l’ai dit auparavant, ne correspondent pas à un contenu envoyé par le serveur. Du coup il faut recréer l’illusion à la main.
05/07/2018, 08h08
kizery

Merci beaucoup pour ces précisions !

J'avais effectivement "compris" que j'aurai besoin de onpopstate pour compléter mon code. J'ai lu pas mal d'info sur ce sujet mais malheureusement avec mon niveau très proche de 0 en js, c’est compliqué pour moi de comprendre le fonctionnement. En fait, ce que j'ai le plus de mal à comprendre en js, c'est "où dois-je placer tel fonction ou tel élément dans la structure de mon code ??". Du coup, dans cet exemple, j'ai tendance à faire un peu n'importe quoi en plaçant mon onpopstate un peu n'importe où et voir ce qui se passe.

Quoi qu'il en soit, je vais continuer à tester tout ça, mais si tu as d'autres conseils, je suis preneur bien sûr :mrgreen:. Encore merci.
07/07/2018, 10h09
kizery

Bon je désespère, j'ai tout essayé, je n' y arrive pas :( :(. Ou une incompatibilité avec mon plugin ?
07/07/2018, 13h40
Watilin

Montre-nous ton code en l’état actuel :)

Le voici :

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
38
39
40
41
42
43
44
45
46
47
 
 window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('getCurrentPage'));
  });
 
  window.addEventListener('pageshow', function () {
  'use strict';
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = 1;
 
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () 
  {
    var param = 'theme=' + clickedButton + '&l=' + requestedPage; 
    $('#contenu_site').load('affichegallery.php', param);
  };
 
  var paginationjs = function (strpage) 
  {
    $('.sync-pagination').twbsPagination(
    {
      totalPages   : nbPages,
      visiblePages : nbPages,
      next         : 'Next',
      prev         : 'Prev',
      startPage: strpage,
      onPageClick  : function (event, page)
      {
        requestedPage = page;
        history.pushState(null, null, "?valeurFiltre=" + requestedPage);
        reloadGallery();  
      } 
    });
  };
 
  paginationjs(requestedPage);
 
  window.onpopstate = function() 
  {
  paginationjs(1);
  };

Bon, comme je le disais, j'ai essayé plein de chose, ici c'est le dernier essais sauvegardé.

Premier problème, ma fonction paginationjs que j'ai crée avec la variable strpage fonctionne à l'ouverture du site, mais quand je décide de l'appeler dans le "onpopstate" avec le paramètre à 1 par exemple, rien ne se passe, la pagination ne bouge pas.

Deuxième problème, je ne vois pas comment récupérer le numéro de page correspondant quand je clique sur précédent. J'ai essayé avec parseInt('<?php echo $_GET['valeurFiltre']; ?>'); hélas le résultat de celui-ci reste toujours égale à 1 Autant pour moi, c'est réglé avec history.state.

On oublie tout ! Je suis tout près du but !

Voici mon code à jour :
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 window.addEventListener('pagehide', function () { sessionStorage.setItem('pagination', $('.sync-pagination').twbsPagination('getCurrentPage')); }); window.addEventListener('pageshow', function () { 'use strict'; var nbPages = parseInt('<?php echo $nombre_pages; ?>'); var clickedButton = 'home'; var requestedPage = 1; $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true); var reloadGallery = function () { var param = 'theme=' + clickedButton + '&l=' + requestedPage; $('#contenu_site').load('affichegallery.php', param); }; $('.sync-pagination').twbsPagination( { totalPages : nbPages, visiblePages : nbPages, next : 'Next', prev : 'Prev', onPageClick : function (event, page) { requestedPage = page; history.pushState(requestedPage, null, "?valeurFiltre=" + requestedPage); reloadGallery(); } }); window.onpopstate = function() { requestedPage = history.state; var $pagination = $('.sync-pagination'); var defaultOpts = { totalPages: nbPages }; $pagination.twbsPagination(defaultOpts); $pagination.twbsPagination('destroy'); $pagination.twbsPagination($.extend({}, defaultOpts, { startPage: requestedPage, onPageClick : function (event, page) { requestedPage = page; history.replaceState(requestedPage, null, "?valeurFiltre=" + requestedPage); reloadGallery(); } })); };
J'ai enfin une gestion de l'historique comme je le souhaitais. Cependant, je ne sais trop expliquer ce qui se passe, mais en l'état il y a pas mal de bug qui persistent...

Exemple :

Je tape "http://localhost/portfolio" dans mon navigateur, automatiquement il me redirige sur "http://localhost/portfolio/?valeurFiltre=1", et donc à la page 1 de mon site.
Je clique sur "page 2", ok ça charge la page 2 en ajax. Page 3 pareil.

Je fais "précédent" dans mon navigateur, je reviens à la page 2 comme attendu, avec cette fois la barre de pagination qui est bien sur "page2", super !

Je fais "suivant" dans mon navigateur, je reviens à la page3 comme attendu, cool !

Ici, je clique sur page 2, RAS, résultat attendu.

Et la je fais "précédent" dans mon navigateur, et m**rde, ça ne fonctionne pas, rien ne se passe, ni la page ni l'URL change, rien ne bouge.

Un conflit entre mon replaceState et pushStae? Je suis sûr que les experts Js vont trouver quelque chose qui cloche dans mon code :mrgreen:

09/07/2018, 15h13
Watilin

Effectivement, tu as un problème à l’utilisation de pushState et replaceState, mais pas forcément là où tu crois.

replaceState fonctionne sur le même principe que location.replace : si tu viens d’ouvrir une page à partir d’un nouvel onglet (bouton « précédent » grisé), et que tu appelles l’une ou l’autre de ces fonctions, tu verras que le bouton « précédent » reste grisé. Au lieu d’ajouter une entrée dans l’historique, ces fonctions remplacent l’entrée actuelle.

Au moment de 'pageshow', tu construis ta pagination avec un gestionnaire de clic qui appelle pushState. Ce n’est pas forcément très clair dans la doc, mais ta fonction onPageClick est appelée à ce moment (voir l’option initiateStartPageClick). Autrement dit, dès le premier chargement de la page, ton script fait un pushState. Tu as alors deux entrées dans l’historique : l’entrée classique, correspondant au premier chargement de la page, et l’entrée que tu as « pushée ». Note que l’entrée classique n’a pas de données state, et je pense que c’est la source de ton problème.

Je pense que tu devrais faire un premier replaceState dans l’écouteur 'pageshow' mais en dehors de la fonction onPageClick, pour remplacer la première entrée de l’historique par une qui a un state ; ensuite, dans les deux fonctions onPageClick, utilise pushState.

Ok voila le code à jour :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('getCurrentPage'));
  });
 
  window.addEventListener('pageshow', function () {
  'use strict';
 
  history.replaceState(requestedPage, null, "?valeurFiltre=" + requestedPage);
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = 1;
 
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () 
  {
    var param = 'theme=' + clickedButton + '&l=' + requestedPage; 
    $('#contenu_site').load('affichegallery.php', param);
  };
 
 
  $('.sync-pagination').twbsPagination(
    {
      totalPages   : nbPages,
      visiblePages : nbPages,
      next         : 'Next',
      prev         : 'Prev',
      onPageClick  : function (event, page)
      {
        requestedPage = page;
        history.pushState(requestedPage, null, "?valeurFiltre=" + requestedPage);
        reloadGallery();  
      } 
    });
 
  window.onpopstate = function() 
  {
    requestedPage = history.state;
 
 
    var $pagination = $('.sync-pagination');
    var defaultOpts = {
        totalPages: nbPages
    };
 
    $pagination.twbsPagination(defaultOpts);      
 
    $pagination.twbsPagination('destroy');
 
    $pagination.twbsPagination($.extend({}, defaultOpts, {
    startPage: requestedPage,
    onPageClick  : function (event, page)
      {
        requestedPage = page;
        history.pushState(requestedPage, null, "?valeurFiltre=" + requestedPage);
        reloadGallery();  
      } 
    }));  
  };

Hélas, j'ai quelques soucis, dans un premier temps, voici un premier problème (j'ai fais une vidéo, c'est plus simple qu'expliquer par écris) :

https://www.youtube.com/watch?v=L8M5...ature=youtu.be

Qu'en dis tu ?

edit : désolé la vidéo n'était pas dispo, c'est corrigé

13/07/2018, 19h14
kizery

Bon j'ai beau retourner mon code dans tous les sens, je suis pas fais pour ça ! Je crois que je vais abandonner et me tourner vers WordPress :D

Bonsoir,
il se passe des trucs bizarres sur Github. La doc http://esimakin.github.io/twbs-pagination/ n’est plus accessible, et https://github.com/esimakin/twbs-pagination/ redirige vers https://github.com/josecebe/twbs-pagination. Pourtant, esimakin et josecebe semblent bien être deux utilisateurs différents…

Bref, la doc de twbsPagination a changé d’adresse : https://josecebe.github.io/twbs-pagination/

Je pense que j’ai repéré le problème qu’on observe dans ta vidéo : les évènements popstate entraînent un appel à pushState (indirectement via onPageClick. Ce dernier pushState crée une entrée gênante dans l’historique car elle va t’empêcher de remonter au-delà.

Dans ta vidéo, le seul moment où tu peux remonter dans l’historique (entre page 3 et page 2), c’est quand tu n’as pas utilisé le bouton précédent, autrement dit quand il n’y a pas eu de popstate.

Il y a quelques temps, j’ai écrit :

Citation:

Envoyé par Watilin

Il suffit que tu y ajoutes une fonction qui récupère le numéro de page depuis l’URL, et qui recrée la pagination. Tu auras sans doute besoin de la méthode .twbsPagination('destroy') comme expliqué dans la doc du plugin.

J’avais tort. Je devais avoir des nœuds dans le cerveau quand j’ai écrit ça. Il y a une façon beaucoup plus simple d’afficher une page twbs, sans avoir à reconstruire la pagination : la méthode 'show'. Elle n’est pas dans la doc mais je l’ai trouvée dans le code et testée. Elle s’utilise comme ceci :

Code:

$pagination.twbsPagination('show', 4); // affiche la page 4

Ça va déjà te permettre de simplifier la fonction onpopstate :
Code:

1 2 3 4 window.onpopstate = function (event) { requestedPage = event.state; $('.sync-pagination').twbsPagination('show' requestedPage); };
Il reste un problème vicieux à régler : on ne peut pas appeler pushState depuis la fonction onPageClick car celle-ci est appelée par la méthode 'show', et ça ferait un pushState dans un popstate, ce qu’on cherche à éviter.
Il faut trouver un moyen de faire la différence entre une commande précédent / suivant du navigateur (autrement dit un changement dans l’historique), et un vrai 'click' sur les boutons de pagination. Malheureusement, l’argument event passé à onPageClick ne contient pas cette information.

La solution que je vais te proposer n’est peut-être pas la plus élégante, mais je n’ai pas mieux. Il s’agit d’ajouter un autre écouteur de 'click' sur les boutons de la pagination (qui ont, par défaut, la classe .page-item), qui aura pour rôle de faire un pushState. Ce sera le seul appel à pushState dans tout ton script.

Il faut éviter de faire un pushState si l’utilisateur clique sur un bouton inactif ou sur le bouton de la page actuelle. Pour ça il faut écarter les classes .disabled et .active au moyen du sélecteur :not(). Comme ces classes peuvent changer, on ne peut pas ajouter l’écouteur « statiquement » ; il faut faire de la délégation avec la méthode .on().
Code:

1 2 3 $('.sync-pagination').on('click', '.page-item:not(.active, .disabled)', function () { history.pushState(requestedPage, null, '?valeurFiltre=' + requestedPage); });
Reste un dernier petit problème : dans quel ordre les évènements sont émis ?
Pour être clair, voici la forme que doit avoir la fonction onPagClick actuellement :
Code:

1 2 3 4 onPageClick: function (event, page) { requestedPage = page; reloadGallery(); }
On a donc deux fonctions, l’une qui modifie requestedPage et l’autre qui utilise cette même variable. Ça serait bien si on pouvait s’assurer que celle qui modifier est appelée avant celle qui utilise.

Pour savoir ça, j’ai regardé dans le code du plugin et j’ai vu qu’il utilisait également .on(). Par chance, jQuery garantit que les écouteurs d’évènements sont appelés dans l’ordre dans lequel ils sont attachés (en tout cas, c’est écrit dans la doc).

Il faut donc écrire les choses dans cet ordre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('.sync-pagination').twbsPagination({ totalPages : nbPages, visiblePages : nbPages, next : 'Next', prev : 'Prev', onPageClick : function (event, page) { requestedPage = page; reloadGallery(); }, }); $('.sync-pagination').on('click', '.page-item:not(.active, .disabled)', function () { history.pushState(requestedPage, null, '?valeurFiltre=' + requestedPage); });
En retirant le pushState de la fonction onPageClick, tu vas voir apparaître un autre problème : le state initial, celui fait avec replaceState, contient une valeur indéfinie. Tu ne pouvais pas le voir à cause du conflit onpopstate / pushState dont j’ai parlé. La cause est toute bête : tu utilises la variable requestedPage avant sa déclaration. Remonte la déclaration pour corriger ce dernier problème.

Note : je te conseille de remplacer tous tes var par let, ça rendra ce genre d’erreurs plus facile à déceler.