HTML 5 History API avec PopState et AJAX continue à recharger la page

Je suis en train de charger des données sur la page via Ajax en mettant à jour l’URL via pushState , aucune erreur. Et popstate renvoie l’object complet dans la console – à des fins d’affichage.

Je suis au point où les boutons avant et arrière fonctionnent partiellement, ce qui signifie parfois que le contenu sera réaffiche lorsque l’URL change, mais la plupart du temps, il suffit de recharger la page, ce qui bloque le bon déroulement de l’application.

Travaillons sans fin à essayer de faire fonctionner les choses, sans succès 🙁

Je ne peux tout simplement pas comprendre pourquoi la page continue de recharger et de revenir à la première instance.

Je pense que cela pourrait avoir quelque chose à voir avec l’état étant ou ne pas être défini sur la première visualisation de la page.

Mon code ci-dessous, qui déclenche une demande Ajax lors du chargement, puis met à jour le contenu des pages lorsque la liste déroulante est modifiée par l’utilisateur.

 $(function() { "use ssortingct"; var $results = $('#results'); // First dataset when page loads (function(){ var x = 'https://swapi.co/api/people/'; var swFirstCall = $.ajax({ dataType: 'json', url: x, async: false }); swFirstCall.done(function(data) { var template = $('#results_tpl').html(); var html = Mustache.render(template, data); $results.html(html); }); })(); // New dataset based on selected category $(document).on('change', '#categories', function(e){ e.preventDefault(); var category = this.value; // get selected value var x = 'https://swapi.co/api/' + category + '/'; var swChangeCall = $.ajax({ dataType: 'json', url: x, async: false }); swChangeCall.done(function(data) { var template = $('#results_tpl').html(); var html = Mustache.render(template, data); $('#results').html(html); console.log("Category: " + category); window.history.pushState( // data // title // url category, category, window.location.pathname + '?page=' + category ); }); }); window.addEventListener('popstate', function(event) { window.location.href = window.location.href; console.log(event); return(event); }); }); 

Toute aide très appréciée. J’ai cherché Stackoverflow, et de nombreuses autres ressources que je ne comprends pas.

Codepen si cela aide à visualiser le code.

Merci Barry

Ce que vous voulez faire, c’est stocker les variables de data et de category dans votre object d’état d’historique lorsque vous pushState . Plus tard, vous popstate cet état lorsque vous déclencherez un événement popstate (l’utilisateur effectuera un retour en arrière). Avec les valeurs que vous obtenez en dehors de l’événement popstate , vous devrez ensuite restituer la page. J’ai apporté des modifications à votre fonction pushState et à votre gestionnaire popstate pour montrer comment procéder. Enfin, vous voudrez suivre les conseils de l’un des commentaires concernant la suppression de l’option async: false dans votre appel ajax – il n’y a aucune raison pour que vous ayez besoin de suspendre le rest de l’exécution de votre script de la sorte.

EDIT: Vous avez oublié de préciser que vous souhaiterez initialiser votre object d’état lors du chargement de la première page. Utilisez la méthode replaceState pour cela, car vous ne souhaitez pas créer une autre entrée d’historique. Vous souhaitez plutôt modifier l’entrée d’historique actuelle pour inclure la category et les data sur lesquelles vous souhaitez revenir lorsque l’utilisateur revient à la page initiale. Voir ci-dessous pour votre méthode swFirstCall.done avec l’appel replaceState inclus.

 // ... swFirstCall.done(function(data) { var template = $('#results_tpl').html(); var html = Mustache.render(template, data); $results.html(html); // initialize history state object window.history.replaceState( { category: 'Select Category', data }, null, '', ); // ... window.history.pushState( // data // title // url { category, data }, category, window.location.pathname + '?page=' + category ); // ... window.addEventListener('popstate', function(event) { window.location.pathname + '?page=' + event.state.category; var template = $('#results_tpl').html(); var html = Mustache.render(template, event.state.data); $('#results').html(html); $('#categories').val(event.state.category); }); // ..