Question

0

58

Views

Back button of the browser is not working + content is not loading if don't click on refresh button

I am really new to JS/jQuery/Ajax I have this code. I want that the content in article tag change but to keep all the rest (header, menu and footer) stays the same while the user click on a link of on the website. I absolutely don't want to have the full page reloading entirely because it causes a poor user experience. This works perfectly and the code is loading the new page, title is changing when you click on a link BUT the back button of the browser does no longer works, title is still the same as the page I was on, really annoying. What should I do to fix this really annoying issue?

$(function() {
  var $article = $("article"),
  
      init = function() {
        // Do this when a page loads.
      },
      ajaxLoad = function(html) {
        document.title = html
          .match(/<title>(.*?)<\/title>/)[1]
          .trim();
        init();
      };
  init();

  $(document).on("click", "a, area", function() { 
    var href = $(this).attr("href");
    history.pushState({}, '', href);
    $article.load(href + " article>*", ajaxLoad);
    return false;
  });
});

Thanks so much for your help!

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T08:59:48.708Z

I added that after the last init()

and it works perfectly!

$(window).on("popstate", function(e) {
    if (e.originalEvent.state !== null) {
      loadPage(location.href);
    }
  });
    
  loadPage = function(href) {
    $article.load(href + " article>*", ajaxLoad);
  };