title: HTML 5 History API with PopState and AJAX keeps reloading the page
body: <p>I'm currently loading data onto the page via Ajax updating the url via <code>pushState</code>, no errors. And <code>popstate</code> returns the full object into the console — for viewing purposes.</p>
  
  <p>I'm at the point where the forward and back buttons work partially, meaning, sometimes it will reshow the content when the url changes, but most of the time it simple reloads the page which is stopping the smooth flow of the application.</p>
  
  <p>Been working endless trying to get things to work, without success :(</p>
  
  <p>I just can't figure out why the page keeps reloading and reverting back to the first instance.</p>
  
  <p>I think it might have something to do with the state being or not being set on first viewing of the page.</p>
  
  <p>My code below, which fires an Ajax request on loading then updates the pages content when the dropdown is changed by the user.</p>
  
  <pre><code>$(function() {
  "use strict";
  var $results  = $('#results');
  
      // First dataset when page loads
      (function(){
        var x = 'https://swapi.co/api/people/';
        var swFirstCall = $.ajax({
          dataType: 'json',
          url: x,
          async: false
        });
        swFirstCall.done(function(data) {
          var template = $('#results_tpl').html();
          var html = Mustache.render(template, data);
          $results.html(html);
        });
      })();
  
      // New dataset based on selected category
      $(document).on('change', '#categories', function(e){
        e.preventDefault();
        var category = this.value; // get selected value
        var x = 'https://swapi.co/api/' + category + '/';
        var swChangeCall = $.ajax({
          dataType: 'json',
          url: x,
          async: false
        });
        swChangeCall.done(function(data) {
          var template = $('#results_tpl').html();
          var html = Mustache.render(template, data);
          $('#results').html(html);
          console.log("Category: " + category);
  
          window.history.pushState(
              // data
              // title
              // url
              category,
              category,
              window.location.pathname + '?page=' + category
              );
        });
      });
      window.addEventListener('popstate', function(event) {
            window.location.href = window.location.href;
            console.log(event);
            return(event);
      });
  });
  </code></pre>
  
  <p>Any help much appreciated. I've searched Stackoverflow, and many other resources though can't understand.</p>
  
  <p><a href="https://codepen.io/anon/pen/NBBPov?editors=0010" rel="nofollow noreferrer">Codepen</a> if it helps viewing code.</p>
  
  <p>Thanks, Barry</p>