Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remember ajax added data when hitting back button

Tags:

jquery

ajax

I have a search page where every search result is added to the page with AJAX. This way I can let users search for e.g Led Zeppelin, then do another search for Metallica but add it to the same result list as the previous search.

My problem is when a user clicks on a link to a record, then hits the back button, back to the search result.
FireFox (7) keeps the page as it looked when I left it, displaying the full result.
IE (7,8) and Chrome (15) on the other hand will display the page as it were before adding any search results with AJAX, as if it doesn't remember that I added data to it.

Below is the code I use. I tried to add the location.hash = "test"; but it didn't seem to work.

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

I don't need a back button that keeps track of changes on the search page, like stepping through each different search result as it was added. I just want the browser to remember the last search result when I hit the back button.

SOLVED
Changing to document.location.hash = "latest search" didn't change anything. I had to use the localStorage as Amir pointed out.

This goes into the rest of the jQuery code:

// 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);     } }); 
like image 236
Niklas Avatar asked Oct 31 '11 16:10

Niklas


People also ask

How do I get my back button to work in AJAX?

To make back button work with AJAX, catch onpopstate event. This handler is triggered that changes the url when back button is clicked. On this event, send AJAX to location. href .

How does AJAX return success data?

You can store your promise, you can pass it around, you can use it as an argument in function calls and you can return it from functions, but when you finally want to use your data that is returned by the AJAX call, you have to do it like this: promise. success(function (data) { alert(data); });

How do you trigger a change event after AJAX call?

One way to trigger an event is to use the jquery trigger function. Show activity on this post. function changeDate(){ $. ajax({ url, data: data, type: "POST", dataType: "json", success: function(cbdata) { update_table(cbdata); } }); } $('#selector').


1 Answers

You have a few options.

  1. Use localstorage to remember the last query
  2. Use cookies (but don't)
  3. Use the hash as you tried with document.location.hash = "last search" to update the url. You would look at the hash again and if it is set then do another ajax to populate the data. If you had done localstorage then you could just cache the last ajax request.

I would go with the localstorage and the hash solution because that's what some websites do. You can also copy and paste a URL and it will just load the same query. This is pretty nice and I would say very accessible.

I am curious to know why it didn't work. Update your answer so we can help.

like image 84
Amir Raminfar Avatar answered Sep 22 '22 09:09

Amir Raminfar