title: Broken code -- How do I properly use AJAX to prevent this section of website from loading?
body: <p>I closely followed an AJAX tutorial ( <a href="https://www.youtube.com/watch?v=WwngGtboldU" rel="nofollow">https://www.youtube.com/watch?v=WwngGtboldU</a> ) to learn how to prevent certain sections of a website from loading. You can see at 17:50 he clicks the links and, rather than the entire page loading, only a certain section loads in.</p>
  
  <p>However, it's simply not working for me. When I click "Cats" or "Dogs", the entire page loads. It's very frustrating! Could anyone figure out what might be going wrong in my version? I've been using XAMPP, by the way, and I always test this by opening cats.php or dogs.php.</p>
  
  <p>style.css</p>
  
  <pre><code>body{
      background-color: aqua;
  }
  
  ul#nav {
      list-style:none;
      padding:0;
      margin: 0 0 10px 0;
  }
  
  ul#nav li {
      display:inline;
      margin-right:10px;
  }
  </code></pre>
  
  <p>header.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;History API&lt;/title&gt;
      &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;nav id="main"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="cats.php"&gt;Cats&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="dogs.php"&gt;Dogs&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>footer.php</p>
  
  <pre><code>        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              $(document).ready(function() {
                  var nav, content, fetchAndInsert;
  
                  nav = $('nav#main');
                  content = $('section#content');
  
  
                  //Fetches and inserts content into the container
                  fetchAndInsert = function(href) {
                      $.ajax({
                          url: 'http://localhost/BlankApacheHistoryAPI/content' + href.split('/').pop(),
                          method: 'GET',
                          cache: false,
                          success: function(data){
                              content.html(data);
                          }                    
                      });
                  }); 
  
  
                  //User goes back/forward 
                  $(window).on('popstate', function() {
                      fetchAndInsert(location.pathname);
                  });
  
  
                  nav.find('a').on('click', function(e) {
                      var href = $(this).attr('href');
  
                      //Manipulate history
                      history.pushState(null, null, href);
  
                      //Fetch and insert content
                      fetchAndInsert(href);
  
  
                      e.preventDefault();            
                  });
  
              });
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>cats.php</p>
  
  <pre><code>&lt;?php
  require 'views/header.php';
  ?&gt;
  
  &lt;section id="content"&gt;
      &lt;?php require 'content/cats.php'; ?&gt;
  &lt;/section&gt;
  
  &lt;?php
  require 'views/footer.php';
  ?&gt;
  </code></pre>
  
  <p>content/cats.php</p>
  
  <pre><code>Cats say meow
  </code></pre>
  
  <p>dogs.php</p>
  
  <pre><code>&lt;?php
  require 'views/header.php';
  ?&gt;
  
  &lt;section id="content"&gt;
      &lt;?php require 'content/dogs.php'; ?&gt;
  &lt;/section&gt;
  
  &lt;?php
  require 'views/footer.php';
  ?&gt;
  </code></pre>
  
  <p>content/dogs.php</p>
  
  <pre><code>Dogs say woof
  </code></pre>