CODEWITHSUNDEEP
javascriptjqueryajaxbrowser-historyhtml5-history
Jonathan
Jonathan

Reputation: 9151

How to enable back button on ajax page

I'm working on a site which navigates as follow:

$(document).ready(function () {
  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    // Back only!
    //location.reload();
    //$('#ajax').load(this.location);
});

The url changes when user navigates, even when user presses the back button. However, the page isn't refreshed when navigating back so only the url changes while the actual page remains the same.

How can I fix this?
Fiddle
Actual site

Upvotes: 2

Views: 1876

Answers (4)

Mika Tuupola
Mika Tuupola

Reputation: 20377

When you navigate with back button ready event is not triggered because of back-forward cache. Instead pageshow event is triggered. You could force page reloading in pageshow event handler.

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

Upvotes: 0

Jonathan
Jonathan

Reputation: 9151

I solved it as following admitted that although it works, it's likely far from the most elegant solution:

var lastLocation = document.location.href;

$(document).ready(function () {
    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
        document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) +
            "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    }

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
        $('#ajax').load(window.location.hash.substr(1));
});

$(document).on("click", "a:not(.regular)", function (e) {
    var url = this.href;
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
        return;

    e.preventDefault();

    $('#ajax').load(url, function () {
        var pagename = url.substr(url.lastIndexOf('/') + 1);
        // Keep track of last location.
        lastLocation = document.location.href.replace(window.location.hash, "") + '#' + pagename;
        document.location.href = '#' + pagename;
    });
});

window.onpopstate = function (event) {
    // Test if popstate changed while lastLocation wasn't updated.
    if (lastLocation != document.location.href)
        location.reload();
    else
        return;
};

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

Adding the page identfier after the # is responsible for the effect. Everything behind # (URL fragment) is supposed to be interpreted by the browser locally. Thus, going back with the same URL but a different fragment does not trigger the browser to do a "reload", since he expects this to be a bookmark.

Change for a real parameter .....?pageid=over_ons.html or go with PATH_INFO .../overons.html

Besides that:

document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)

is just

document.location.hash

Upvotes: 1

Eternal1
Eternal1

Reputation: 5625

Use an array to store history.

$(document).ready(function () {

  var history = [];

  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    history.push(document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1), function(){
      history.push(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
   });
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
      history.push(url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    $('#ajax').load(history[history.lastIndexOf(document.location.href)-1], function(){
       document.location.href =  "#" + history[history.lastIndexOf(document.location.href)-1];
    });
});

Upvotes: 0

Related Questions