Can I add a back function to my jquery?

Question

I'm building myself a personal site and teaching myself new code as I go - one of the most recent things I've tried is jquery (and some ajax) to call new content without reloading the page so that my accordion menu doesn't reload. After some trial and error, and help from StackOverflow I have the following:

function reloadMiddleWith(theme, page, content) {
    var new_url = "http://www.myurl.com/dev/" + page + ".php#" + content;
    $('#live-area').addClass(theme);
    $('#area-loader').load(new_url);
}

This is perfect! This does everything I had asked for but there was one oversight I hadn't considered: I can't use my BACK button. In it's currently form, clicking BACK doesn't take me to the content I had previously, but takes me all the way back to the browser 'launch' page when I opened the browser. Incidentally, the above code was a replacement for the original AJAX code I was using...

function reloadMiddleWith(theme, page, content) {
    var new_url = "http://www.myurl.com/dev/" + page + ".php#" + content;
  $(‘#live-area’).addClass(theme);
  $.ajax({
      url: new_url,
      dataType: 'html'
 })
  .done(function(data) {
      // Assuming the request returns HTML, replace content
      $('#area-loader').html(data);
 });

My question is what do I need to do to add the ability to hit back? Is the second AJAX script capable of this? Is it a minor addition or would I need to completely rewrite the function?

Thanks!

may be this can help you http://stackoverflow.com/questions/17769884/ajax-and-back-button-hash-changes-but-where-is-previous-page-state-stored — Pranay Bhardwaj, Feb 23 '14 at 06:16
Check this http://stackoverflow.com/questions/17594413/js-or-jquery-browser-back-button-click-detector — AyB, Feb 23 '14 at 09:58

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

Because your browser does not reload (because of ajax) there is no history being maintained hence you cannot use the back button. If you want, you may create a back button on your website (not the browser back button) and then track history yourself.

OR search for "html5 pushstate" to find an alternative way.

OR make your application listen for hashtags and load a specific view accordingly.. A hashtag might look something like this http://mywebsite.com/#/somepage So whenever your webpage loads it check for the url after the # sign and then loads (via ajax) the correct view.

Or maybe try a framework like Backbone or Angular

Also you might find this question interesting.

Can I add a back function to my jquery?

1 Answers1