title: Jquery Ajax call HTML5 History and back button
body: <p>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.</p>
  
  <p>This is my HTML for the buttons:</p>
  
  <pre><code>&lt;a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html"&gt;
  
      &lt;img src="imagepath" /&gt;
  
  &lt;/a&gt;    &lt;!-- portfolioThumbnail --&gt;
  </code></pre>
  
  <p>and here is my Jquery:</p>
  
  <pre><code>$('.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;
  
  
      });
  
    }
  
  }); 
  
   });    
  </code></pre>
  
  <p>I have a div called projectWrapperReplace in my HTML too. Looking if anyone can help me get this working. Thanks</p>