title: HTML link with GET parameters: load page html and javascript before executing ajax request
body: <p>When I paste the HTML link below in my address bar or press the browser "previous page" button my ajax GET request is executed before the html content is fully loaded resulting in my ajax returned content being displayed above my nav bar and therefore breaking my site. 
  If the same request gets executed from within the site then everything is fine.
  How can I make sure the page HTML and javascript loads before the ajax request is fired?</p>
  
  <p>EDIT: SOLVED (answer in post below)</p>
  
  <p>HTML LINK</p>
  
  <p><code>https://domainName/?action=listy&amp;p=test</code></p>
  
  <p>JS pushstate</p>
  
  <pre><code>var container = document.querySelector('.lnk');
  var url = "";
  
  container.addEventListener('click', function(e) {
    if (e.target != e.currentTarget) {
      e.preventDefault();
  
      if (e.target.getAttribute('name')) {
        var data = e.target.getAttribute('name')
        url = "?action=list&amp;p=" + data;
        history.pushState(data, null, url);
      }
  
    }
    e.stopPropagation();
  }, false);
  
  
  window.addEventListener('popstate', function(e) {
  
    window.location.replace(url);
  
  });
  </code></pre>
  
  <p>JQuery AJAX</p>
  
  <pre><code>$(document).ready(function() {
    // .....
    success: function(dataBack) {
      $('.content-area').html(dataBack);
    },
  });
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>if(isset($_GET['action']) &amp;&amp; !empty($_GET['action'])) {
  $action = $_GET['action'];
  $var = $_GET['p'];
  switch($action) {
  
      case 'list' : list($var);break;
  
  
  }
  }
  </code></pre>