How can I reverse AJAX action on back button click?

Question

I am trying to figure out history API but after reading the documentation I barely understand anything.

For example I have the following AJAX:

$("#hund").click(function(e) {
         e.preventDefault();
$(".result").load("hund.html #content", function() {
  });

The following browser URL manipulation:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This I understand. Click something, change the url. Click back, change the url back.

But I want, if the back button is clicked after the AJAX click, I want the AJAX call to be reversed. In that case, that would be the result div to be emtpy again, or if you have clicked several things and then clicked back, the previous stuff to be loaded.

How would I achieve this effect?

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

You need to modify the browser history manually. There are libraries for this.

See What's the best library to do a URL hash/history in JQuery?

edited May 23 '17 at 11:52

Community

1
1

answered Apr 27 '13 at 22:59

cirrus

5,624
8
44
62

thx but I dont want any hashes, I want normal /index.html type of URLs. – user1721135 Apr 27 '13 at 23:14
you don't *have* to use hashes :) But I would use choose a library that gives you better cross browser support rather than using onpopstate and window.history directly. – cirrus Apr 27 '13 at 23:33
thx ill check it out. I also discovered pijax.js which seems pretty decent as well – user1721135 Apr 28 '13 at 00:36

score 1 · Accepted Answer · answered Apr 27 '13 at 23:00

Preserve the contents of the previous pages. For example:

var lastPage = $('.result').children().remove();
$('.result').load(...);

Then, when you want to go back, do something like this:

$('.result').empty().append(lastPage);

That's the basic principle, at least. In practice, if you want someone to be able to go back multiple times, then you can't just have one lastPage; you'll need to do something more complicated.

One more complicated way would be to keep an object with the contents of all the previous pages visited (cache). Then you might have a function navigate that looks like this:

var cache = {};
var currentPageName = /* something */;
function navigate(newPageName) {
    cache[currentPageName] = $('.result').children().remove();
    if(Object.prototype.hasOwnProperty.call(cache, newPageName)) {
        $('.result').append(cache[newPageName]);
        delete cache[newPageName];
    }else{
        $('.result').load(newPageName + ' #content');
    }
    currentPageName = newPageName;
    history.pushState(newPageName, newPageName, newPageName);
}

Then in onpopstate you can use navigate as well.

Ty, I will take a long look at this. But how do I determine if the user has clicked back or forward in the browser? So how do I know which sotred page to load? — user1721135, Apr 27 '13 at 23:13
@user1721135: Your `onpopstate` handler is called with your `state` argument you passed to `pushState`. — icktoofay, Apr 27 '13 at 23:14
probably a stupid question but what would I be passing in state for example? currentPageName? — user1721135, Apr 27 '13 at 23:24
@user1721135: Sure, or anything you want to use that'll be most helpful to you when you need it back in `onpopstate`. — icktoofay, Apr 27 '13 at 23:24

How can I reverse AJAX action on back button click?

2 Answers2