title: Use back button and history after an ajax call
body: <p>I have read a lot about pushState and PopState but i really dont know how to implement this in my following code.</p>
  
  <p>index.php:</p>
  
  <pre><code>&lt;section id="tablazonas" class="container features"&gt;&lt;/section&gt;
  &lt;script&gt;
  function getZona()
  {
     $.ajax({
       type: "GET",
       url: 'zonas.php',
       success: function(data) {
            $('#tablazonas').html(data);
  
       }
     });
  }
  window.onload=getZona; 
  
  function getPref(id_zona,name_zona)
  {
     $.ajax({
       type: "GET",
       url: 'pref.php',
       data: { 'id_zona': id_zona , 'name_zona': name_zona},
       success: function(data) {
            $('#tablazonas').html(data);
          $('html,body').animate({
                scrollTop: $('#tablazonas').offset().top - ( $(window).height() - $('#tablazonas').outerHeight(true) ) / 2
            }, 1000);
       }
     });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>zonas.php</p>
  
  <pre><code>&lt;h2&gt;Zonas&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;table id="zonas" class="table table-bordered hover stripe cell-border compact mini-tablas" style="width:100%"&gt;
        &lt;thead&gt;    
            &lt;tr&gt; 
                &lt;th&gt;ZONAS&lt;/th&gt;
                &lt;th&gt;TITLE 1&lt;/th&gt;
                &lt;th&gt;TITLE 2&lt;/th&gt;
                &lt;th&gt;TITLE 3&lt;/th&gt;
                &lt;th&gt;TITLE 4&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;th&gt;&lt;a href="javascript:void(0);" onclick="getPref(1,'ZONA 1')"&gt;ZONA 1&lt;/a&gt;&lt;/th&gt;
                &lt;th&gt;23.87&lt;/th&gt;
                &lt;th&gt;27.69&lt;/th&gt;
                &lt;th&gt;-3.82&lt;/th&gt;
                &lt;th&gt;0.86&lt;/th&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
               &lt;th&gt;&lt;a href="javascript:void(0);" onclick="getPref(2,'ZONA 2')"&gt;ZONA 2&lt;/a&gt;&lt;/th&gt;
               &lt;th&gt;38.39&lt;/th&gt;
               &lt;th&gt;45.30&lt;/th&gt;
               &lt;th&gt;-6.91&lt;/th&gt;
               &lt;th&gt;0.85&lt;/th&gt;
           &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>pref.php (Here, i had to make a back button to return to the previous state making the ajax call again)</p>
  
  <pre><code>&lt;?php
  require("claseutilidades.php");
  $u = new Utilidades();
  
  $id_zona = $_GET['id_zona'];
  $name_zona = $_GET['name_zona'];
  ?&gt;
  &lt;h2&gt;Prefecturas de &lt;?php echo $name_zona; ?&gt;&lt;/h2&gt;
    &lt;div class="row"&gt;
      &lt;table id="prefecturas" class="table table-bordered hover stripe cell-border compact mini-tablas" style="width:100%"&gt;
          &lt;thead&gt;    
              &lt;tr&gt; 
                  &lt;th&gt;Pref&lt;/th&gt;
                  &lt;th&gt;TITLE 1&lt;/th&gt;
                  &lt;th&gt;TITLE 2&lt;/th&gt;
                  &lt;th&gt;TITLE 3&lt;/th&gt;
                  &lt;th&gt;TITLE 4&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
      &lt;?php $u-&gt;getPref($id_zona,$name_zona); ?&gt;
          &lt;/tbody&gt;
         &lt;tfoot&gt;
              &lt;tr&gt;
                 &lt;th&gt;TOTAL&lt;/th&gt;
                 &lt;th&gt;0&lt;/th&gt;
                 &lt;th&gt;0&lt;/th&gt;
                 &lt;th&gt;0&lt;/th&gt;
                 &lt;th&gt;0&lt;/th&gt;
             &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt; 
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-2 col-md-offset-5"&gt;&lt;button type="button" class="btn btn-block btn-outline btn-primary" href="javascript:void(0);" onclick="getZona()"&gt;Back&lt;/button&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;script&gt;
  
  function getZona()
  {
     $.ajax({
       type: "GET",
       url: 'zonas.php',
       success: function(data) {
            $('#tablazonas').html(data);
              $('html,body').animate({
                scrollTop: $('#tablazonas').offset().top - ( $(window).height() - $('#tablazonas').outerHeight(true) ) / 2
            }, 1000);
       }
     });
  
  }
  </code></pre>
  
  <p>I have tried change the</p>
  
  <pre><code>&lt;th&gt;&lt;a href="javascript:void(0);" onclick="getPref(1,'ZONA 1')"&gt;ZONA 1&lt;/a&gt;&lt;/th&gt;
  </code></pre>
  
  <p>for</p>
  
  <pre><code>&lt;th&gt;&lt;a href="#zona1" onclick="getPref(1,'ZONA 1')"&gt;ZONA 1&lt;/a&gt;&lt;/th&gt;
  </code></pre>
  
  <p>but that doesn't solve my problem because it gets the back button working but it doesn't save the state of the page</p>