Fonction bouton précédent/suivant JS

Bonjour à tous,

J'ai besoin de votre aide, je suis bloqué à essayer de réaliser une fonction js qui permettrait de naviguer entre les pages d'un magazine...

Pour ça, j'ai créer 2 boutons (page suivante/ page précédente) qui doivent me servir à naviguer entre les pages de mon magazine.

Après plusieurs recherches sur internet je n'ai rien trouvé de concluant, le système history.back()/forward() ne m'aide pas et le .go() non plus.

Il faudrait que je trouve un moyen de lier ces boutons à ma dropdownlist des pages du magazines et c'est la que je coince un peu...(photo pour imager mes propos)



Je vous met mes débuts de code en lien avec ma question : (fonction js)

// fonction page Précédente
/*$(document).on('click', '#left_page_magazine',function(){
  $("#left_page_magazine").prepend("#list_select_page_magazine");
  console.log('Ok');
});*/
$( "#left_page_magazine" ).on( "click", function() {
  obj.animation.verifyPosition( "-" );
  obj.activeClass.currentClass( [ obj.activeClass.lists, obj.activeClass.sections ] );
} );
 
function pagePrecedente($id_page){
  //$("a").prepend($('#list_select_page_magazine').forward('ok')); //marche ap
  $("a").document.location.href="http://127.0.0.1:8000/compte/espacedetravail/236/"+$id_page;
}
 
function pageSuivante(){
  $("a").append("<b>1</b>"); 
}

ma dropdownlist a la classe #list_select_page_magazine et mes 2 boutons (left/right_page_magazine)

Code html dropdownlist :

<div id="list_select_page_magazine" class="mCustomScrollbar" data-mcs-theme="dark" data-toggle="tooltip" data-placement="top" title="Double cliquez pour accéder à une page">
                <div class="content_list_select_page_magazine" data-idmagazine="{{idmagazine}}" data-idpage="{{page_couverture.id}}">
                    {{page_couverture.pageLabel}}
                </div>
                <div id="drag_select_page_magazine" >
                    {% for page in toutes_pages %}
                        {% if page.pageLabel == 'Page' %}
                            <div class="ui-state-default content_list_select_page_magazine listing_page"  data-idmagazine="{{idmagazine}}" data-idpage="{{page.id}}" data-page="{{page.pageNumero}}">
                            {{page.pageLabel}} {{page.pageNumero}}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="content_list_select_page_magazine" data-idmagazine="{{idmagazine}}" data-idpage="{{page_verso.id}}">
                    {{page_verso.pageLabel}}
                </div>
            </div>

Code html de mes 2 boutons :

<a href="#" onclick="pagePrecedente(){#javascript:history.back();#}" id="left_page_magazine"><i class="fa fa-arrow-circle-left"></i></a>
 
<a href="#" onclick="pageSuivante(){#javascript:history.forward();#}" id="right_page_magazine"><i class="fa fa-arrow-circle-right"></i></a>

En espèrant que vous pourrez me faire avancer !

Merci d'avance à ceux qui me répondront

Salut,

je ne pige pas trop comment c'est codé (c'est un fichier mustache au milieu ? )

Toi tu ne veux pas naviguer dans l'historique mais dans tes pages. Du coup je ne comprends pas pourquoi tu veux utilisé "history" qui ne me semble pas adapté à ton besoin.
Cela te fait naviguer dans l'historique de tes pages : en gros tu reviens à la page précédente que tu as visité et éventuellement à la page suivante que tu as visité si tu étais déjà revenu en arrière dans l'historique des pages visités.


Comment sont crées tes pages ? Cela ne serait pas plus simple de mettre directement le bon numéro de page dans les liens au moment ou tu génères la page plutôt que de faire une fonction javascript ?
Modifié par Mathieuu (29 Jul 2020 - 14:24)

Salut Mathieu,

Tout d'abord merci de ta réponse,

Le fichier du milieu est un fichier .html.twig (utilisé avec symfony).

Ensuite oui tu as raison, je ne dois pas utiliser le système "history", ça je l'avais compris , parce qu'effectivement je veux naviguer entre les pages de mon magazine (ces même pages qui se trouvent donc dans la liste déroulante que tu peux voir sur l'image).

Voulant éviter de recharger la page(navigateur) à chaque fois que je me balade entre les pages de mon magazine, je me suis dit que créer une fonction javascript était parmi une des meilleures solutions...

Si pour toi, il y a un moyen plus simple de faire, je suis tout oui

A priori cela va depend de comment tu charges le site, je verrais 2 possibilités :
- Si tu charges le contenu de toutes les pages du magazine dès le départ le fait de cliquer sur suivant/précédent doit juste modifier l'affichage du contenu de la page (que le milieux qui bouge, limite un système d'ancre doit pouvoir faire le job)
- Si tu ne charges pas tout le contenu, il faut pouvoir le récupérer et le mettre à jour : une récupération du nouveau contenu via ajax devrait le faire.

Et de mémoire lointaine, il fallait faire gaffe pour que le reste du code javascript s'applique sur les nouveaux éléments qui apparaissent.


Et petit édit au passage : j'aurai commencé par faire un site qui marche avec des rechargements de page du navigateur, puis ensuite j'aurai chercher à l’améliorer avec des bouts de code javascript.
Cela permet d’être sur que ton utilisateur pourras utiliser ton site même si il n'utilise pas javascript ou qu'un script par la plante tout ton javascript (et donc le fonctionnement du site)
Modifié par Mathieuu (29 Jul 2020 - 15:55)

Alors c'est un projet qui à été commencé par un autre dev que moi et je suis dessus depuis seulement 2 semaines... mais je crois bien que tous le contenu charge d'un coup et qu'effectivement mes boutons précédent/suivant me serviraient uniquement à modifier le contenu de ma page au milieu.

J'ai un début de fonction qui me parait bien et j'aimerais améliorer celle-ci pour qu'elle fasse vraiment ce que je veux c-a-d aller de page en page (dans ce cas ci suivante) :

Pour te détailler un peu les étapes de ma fonction :
- je récupère l'id magazine, l'id page et le numéro page des pages qui sont donc présentes dans ma liste déroulante; je met ensuite ces données dans un tableau (tableau_page)
-et la ensuite faudrait que je trouve un moyen (soit dans un foreach ou un for je dirais) quoique je pourrais faire tout un tas de if mais ça serait bcp trop long... qui me permettrait d'être rediriger vers la page suivante. (nb: le pb avec ces pages c'est que les id ne se suivent pas c a d: ex: page1=>id=782; page2=>id=805; page3=>796 etc etc)

Voila j'espère t'exposer au mieux mon problème , et merci de m'accorder de ton temps pour me répondre

function pageSuivante(){ //id_page
  var tableau_page = [];
  var i = 0;
  var id_page, id_magazine, page;
  $('.content_list_select_page_magazine').each(function(){  //récupère l'id et le numéro des pages dans un tableau
    id_magazine = $(this).data('idmagazine');
	  id_page = $(this).data('idpage');
	  page = $(this).data('page'); 
	  tableau_page['tableau_'+i]= {"id_magazine" : $(this).data('idmagazine'),"id_page" : $(this).data('idpage'), "page" : $(this).data('page')};
    i++;
    //console.log(tableau_page.length);
  });
  //var page_suivante = id_page + 1;
  document.location.href="http://127.0.0.1:8000/compte/espacedetravail/"+ id_magazine + "/" + id_page; //page_suivante;
  //console.log(page_suivante);
  console.log(tableau_page);
  //console.log(document.location.href);
  
}