CODEWITHSUNDEEP
javascriptjqueryajaxhtmlhtml5-history
Ryan Swanson
Ryan Swanson

Reputation: 390

Jquery Ajax call HTML5 History and back button

I've read a lot about this and feel that while I understand all the parts, I can not figure out how to put it all together without redoing my project. I have ajax set up and working really well on my site. I was able to add a # in the URL when new content comes in. The back button works, and goes through all the correct URLs without reloading the page, but the ajax doesn't refresh.

This is my HTML for the buttons:

<a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html">

    <img src="imagepath" />

</a>    <!-- portfolioThumbnail -->

and here is my Jquery:

$('.portfolioThumbnail').on('click', function(){

 var thisProject =  $(this).attr('href')

$.ajax('http://oursite.com/' + thisProject, {
  success: function(response) {
    $('.projectWrapperReplace').html(response);
  },
  error: function() {

      alert('error');
  },
  timeout: 5500,
  beforeSend: function() {

    $(this).find('.portfolioThumbnail').addClass('loading');

  },
  complete: function() {


    $(".blurable").addClass('blur');

    $(".blurable").addClass('whiteOut');



    $('.projectWrapper').fadeIn('slow', function(){

        $('.projectWrapper').addClass('noBlur');

        window.location.hash = thisProject;


    });

  }

}); 

 });

I have a div called projectWrapperReplace in my HTML too. Looking if anyone can help me get this working. Thanks

Upvotes: 1

Views: 2116

Answers (1)

Michael Tallino
Michael Tallino

Reputation: 821

You need an event listener for when the back or forward buttons are pressed (right now you're only loading the ajax content when you click the .portfolioThumbnail buttons).

Make the ajax load and state classes a separate function, say hashChange()

Checkout onhashchange

//call hashChange on window hash chage
window.onhashchange = hashChange;
//and also on buttonclick
$('.portfolioThumbnail').on('click', function() {
    hashChange();
})

Upvotes: 1

Related Questions