Rappelez-vous les données ajoutées ajax lorsque vous appuyez sur le bouton

J’ai une page de recherche où chaque résultat de recherche est ajouté à la page avec AJAX. De cette façon, je peux laisser les utilisateurs rechercher par exemple Led Zeppelin , puis faire une autre recherche pour Metallica, mais l’append à la même liste de résultats que la recherche précédente.

Mon problème est lorsqu’un utilisateur clique sur un lien vers un enregistrement, puis appuie sur le bouton Précédent pour revenir au résultat de la recherche.
FireFox (7) conserve la page telle qu’elle était quand je l’ai quitté, affichant le résultat complet.
IE (7,8) et Chrome (15), quant à eux, afficheront la page avant d’append des résultats de recherche avec AJAX, comme si elle n’avait pas ajouté de données.

Voici le code que j’utilise. J’ai essayé d’append le location.hash = "test"; mais cela ne semblait pas fonctionner.

 // Add search result $("#searchForm").submit(function (event) { //location.hash = "test"; event.preventDefault(); $.post($(this).attr('action'), $(this).serialize(), function (data) { $("tbody").append(data); }); }); 

Je n’ai pas besoin d’un bouton de retour permettant de suivre les modifications sur la page de recherche, comme parcourir chaque résultat de recherche ajouté. Je veux juste que le navigateur se souvienne du dernier résultat de recherche lorsque je clique sur le bouton Retour.

RESOLU
Passer à document.location.hash = "latest search" n’a rien changé. J’ai dû utiliser le localStorage comme Amir l’a souligné.

Cela va dans le rest du code jQuery:

 // Replace the search result table on load. if (('localStorage' in window) && window['localStorage'] !== null) { if ('myTable' in localStorage && window.location.hash) { $("#myTable").html(localStorage.getItem('myTable')); } } // Save the search result table when leaving the page. $(window).unload(function () { if (('localStorage' in window) && window['localStorage'] !== null) { var form = $("#myTable").html(); localStorage.setItem('myTable', form); } }); 

Vous avez quelques options.

  1. Utiliser localstorage pour mémoriser la dernière requête
  2. Utilisez des cookies (mais ne le faites pas)
  3. Utilisez le hachage comme vous l’avez essayé avec document.location.hash = "last search" pour mettre à jour l’URL. Vous devriez revoir le hachage et s’il est défini, effectuez un autre ajax pour remplir les données. Si vous aviez effectué localstorage, vous pouviez simplement mettre en cache la dernière requête ajax.

J’irais avec le localstorage et la solution de hachage parce que c’est ce que font certains sites Web. Vous pouvez également copier et coller une URL et celle-ci ne fera que charger la même requête. C’est plutôt sympa et je dirais très accessible.

Je suis curieux de savoir pourquoi cela n’a pas fonctionné. Mettez à jour votre réponse afin que nous puissions vous aider.

Une autre solution consiste à utiliser le fait que les champs INPUT sont conservés lors de l’utilisation du bouton Retour. Donc, je fais comme ça:

Ma page contient une entrée cachée comme ça:

  

Une fois le contenu ajax chargé dynamicment, je sauvegarde le contenu dans mon champ caché avant de l’afficher:

 function loadAlaxContent() { var xmlRequest = $.ajax({ //prepare ajax request // ... }).done( function(htmlData) { // save content $('#bfCache').val( $('#bfCache').val() + htmlData); // display it displayAjaxContent(htmlData); }); } 

Et la dernière chose à faire est de tester la valeur du champ caché lors du chargement de la page. S’il contient quelque chose, parce que le bouton Précédent a été utilisé, il suffit de l’afficher.

 jQuery(document).ready(function($) { htmlData = $('#bfCache').val(); if(htmlData) displayAjaxContent( htmlData ); }); 

Je crois que vous pouvez utiliser la section de hachage (après le signe #) pour différencier l’appel pré-ajax de la page et l’appel post-ajax, de sorte que le bouton Précédent vous amène à la version de l’appel post-ajax. Pouvez-vous expliquer pourquoi cette solution n’a pas fonctionné pour vous?

Cette page peut aider:

http://ajaxpatterns.org/Unique_URLs#Bookmarkable.2C_Linkable.2C_and_Type-In-Able

“Signalisable, pouvant être lié et associé à un type

window.location.hash rend l’URL unique, ce qui permet à un utilisateur de le marquer, de s’y lier et de le taper directement dans son navigateur. window.onload s’assure que le signet est utilisé pour définir l’état. Polling ou IFrame garantit que cela fonctionnera même lorsque l’URL de base (avant le hachage) est la même. ”