CODEWITHSUNDEEP
javascriptjqueryhtml5-history
NaMo
NaMo

Reputation: 533

History Pushstate and Popstate not working properly

$( document ).ready(function() {
    $(".a-menu").click(function(event){
        event.preventDefault();
        window.history.pushState({ content: $('.page-content').html() }, 
        pageData['header'], $(this).attr('href'));
    });

    window.onpopstate = function(event){
        var d = event.state;
        $('.page-content').html(d.content); //d.content doesn't give anything for last back attempt.
    };
});

And what I am supposed to do for condition like I go back and then go forward.

Note: I have seen many answers on stackoverflow, I know this can be a duplicate, I've tried many solutions.

Upvotes: 0

Views: 3846

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

After work around the code ... I reached to this

$( document ).ready(function() {
     var getHtml = $('.page-content').html();
     $(".a-menu").click(function(event){
        event.preventDefault();
        var ThisHref = $(this).attr('href');
        getHtml = $('.page-content').html();

        // add A new Content 
        $('.page-content').html('<div>'+ThisHref+'</div>');

        if(window.location.href.indexOf(ThisHref) === -1){
           window.history.pushState({content: $('.page-content').html()},null, ThisHref);
        }
    });
    window.addEventListener('popstate', function(event) {
       var state = event.state == null ? getHtml : event.state.content;
       console.log(state);
       $('.page-content').html(state);        
    });
});

And this exactly how it should work

$( document ).ready(function() {
  var getHtml = $('.page-content').html();   // get the content div html content
  $(".a-menu").click(function(event){        // <a> click event
      event.preventDefault();                //prevent redirect
      var ThisHref = $(this).attr('href');   // get this <a> href attribute
      getHtml = $('.page-content').html();   // get the content div html content before change the content

      // add A new Content 
      $('.page-content').html('<div>Current page is: '+ThisHref+'</div>');

      if(window.location.href.indexOf(ThisHref) === -1){ // check if url dont have a href to prevent run the pushState in each click
        window.history.pushState({content: $('.page-content').html()},null, ThisHref);  // pushState
      }
  });
window.addEventListener('popstate', function(event) {
    var state = event.state == null ? getHtml : event.state.content; // if event.state == null get the previous html  if not get the content
    //console.log(state);
    $('.page-content').html(state); // append the html to the content div

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="index.html" class="a-menu">Home</a>
<a href="Cat.html" class="a-menu">Cat Page</a>
<a href="Dog.html" class="a-menu">Dog Page</a>
<div class="page-content"><div>Current page is: index.html</div></div>

You can take a look at this fiddle as well

Upvotes: 2

user8108377
user8108377

Reputation:

try this one 

window.onpopstate = function(){
    window.history.go(-1);
    var d = history.state;
    $('.page-content').html(d);
};

Upvotes: 0

Related Questions