title: How do I get back button on browser to work with AJAX correctly?
body: <p>I have a page on my company site with an ajax call. It works perfectly, but a bug was discovered that clicking the back button in the browser just reloads the page and doesn't go to the previous page here is my code:</p>
  
  <pre><code>    function openTab(evt, tabName, url, title) {
  //$('.action').attr('checked', false);
  //$('.sub-action').attr('checked', false);
  //$('.actionbutton').addClass('turnedoff').attr('value','false');
  //$('.selected').removeClass('selected').addClass('unselected');
  //$('.selected-sub').removeClass('selected-sub').addClass('unselected-sub');
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  document.getElementById('tab' + tabName).className += " active";
  document.title = title;
  history.pushState({},document.title, window.location.protocol + '//' + window.location.hostname + url);
   }
  
  (function ($) {
  jQuery(document).ready(function($){
      $.getJSON( "/register/?ajax=true", function( data ) {
          $("#welcome").html(data.tabs.welcome);
          $("#dog").html(data.tabs.dog);
          $("#litter").html(data.tabs.litter);
          var useDefaultTab = true;
          if(typeof(sessionStorage)!=="undefined" &amp;&amp; typeof(sessionStorage.actionURL)!=="undefined" &amp;&amp; sessionStorage.actionURL != 'false')
          {
              var selected = $("input[value='" + sessionStorage.actionURL + "']");
              if(selected.length)
              {
                  useDefaultTab = false;
                  $('.tab' + selected.parents('.tabcontent').attr('id')).click();
                  selected.prop('checked',true);
                  $('.actionbutton').removeClass('turnedoff').attr('value',sessionStorage.actionURL);
                  if(selected.hasClass('sub-action'))
                  {
                      selected.closest('ul ul li').removeClass('unselected-sub').addClass('selected-sub');
                      var selectedParent = selected.parents('li.unselected').find('.action');
                      selectedParent.prop('checked',true);
                      selectedParent.closest('li').removeClass('unselected').addClass('selected');
                  }
                  else
                  {
                      selected.closest('li').removeClass('unselected').addClass('selected');
                  }
  
              }
  
          }
  
          if (useDefaultTab)
          {
              $('.action').prop('checked', false);
              $('.sub-action').prop('checked', false);
              var params = {};
              window.location.search.replace(/[?&amp;]+([^=&amp;]+)=([^&amp;]*)/gi, function(str, key, value) {
                params[key.toLowerCase()] = value;
              });
              var segments = window.location.pathname.toLowerCase().split('/');
              if (params.activity == 'litter' || segments[2] == 'litter')
              {
                  document.getElementById("tablitter").click();
              }
              else if (params.activity == 'puppy' || segments[2] == 'dog')
              {
                  document.getElementById("tabdog").click();
              }
              else
              {
                  // Get the element with id="defaultOpen" and click on it
                  document.getElementById("tabwelcome").click();
              }
          }
  
          window.onpopstate = function(event) {
            window.location.href = document.location;
          };
  
          $('li .action').change(function(){
              // Locate parent li, swap .unselected and .selected classes
              var li = $(this).closest('li');
              url = $(this).attr('value');
              if (li.hasClass('unselected')) {
                  $('.selected').removeClass('selected').addClass('unselected');
                  $('ul ul .selected-sub input').removeAttr('checked');
                  $('ul ul .selected-sub').removeClass('selected-sub').addClass('unselected-sub');
                  li.removeClass('unselected').addClass('selected');
              } else {
                  if (li.hasClass('selected')) li.removeClass('selected').addClass('unselected');
              }
              if (url == "false") {
                  $('.actionbutton').addClass('turnedoff').attr('value','false');
              } else {
                  $('.actionbutton').removeClass('turnedoff').attr('value',url);
              }
          });
          $('li .sub-action').change(function(){
              // Locate parent li, swap .unselected and .selected classes
              var li = $(this).closest('ul ul li');
              url = $(this).attr('value');
              if (li.hasClass('unselected-sub')) {
                  $('ul ul .selected-sub').removeClass('selected-sub').addClass('unselected-sub');
                  li.removeClass('unselected-sub').addClass('selected-sub');
              } else {
                  li.children('input').removeAttr('checked');
                  if (li.hasClass('selected-sub')) li.removeClass('selected-sub').addClass('unselected-sub');
              }
              if (url == "false") {
                  $('.actionbutton').addClass('turnedoff').attr('value','false');
              } else {
                  $('.actionbutton').removeClass('turnedoff').attr('value',url);
              }
          });
  
          $('.actionbutton').on('click',function(){
              if ($(this).attr('value') == "false") return false;
              if(typeof(sessionStorage)!=="undefined")
              {
                  sessionStorage.actionURL=$(this).attr('value');
              }
              document.location = $(this).attr('value');
          });
  
  
      });         
  });
   })(jQuery);
  </code></pre>
  
  <p>I looked up a few places and it says to use the <code>history.replaceState(null, null, '');</code> object to achieve this but it doesn't work. Do I have it in the right place? or should it be somewhere else in my function?</p>