title: Post value to page using AJAX then load results in div
body: <p>I am working on a one page website, and am trying to load the slider with the pictures of the project dynamically each time a project is selected from the list. I cannot get the value to be passed with any means, and the POST global comes back always empty. I even tried to do it with a GET but did not work.</p>
  
  <p>Here is the code for the button:</p>
  
  <pre><code> &lt;div class="carousel-inner"&gt;
              &lt;div class="active item project-1"&gt;
                  &lt;img class="row" src="includes/uploads/test.png" /&gt;
                  &lt;div class="project-description project-desc-1 row"&gt;
                      &lt;div class="background-container col-md-6"&gt;
                          &lt;h1 class="col-md-9 project-title"&gt;Project described here&lt;/h1&gt;
                          &lt;p class="col-md-10"&gt; text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                              &lt;a class="btn btn-default btn-lg show-gallery project" href="#test"&gt;View Gallery
                              &lt;/a&gt;
  
  
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The slider to be loaded:</p>
  
  <pre><code>&lt;?php
  $project="";
  if (isset($_POST['projectName']))
  {
  $project = $_POST['projectName'];
  }
  ?&gt;
  &lt;section id="projects-slider" class="cd-section"&gt;
  &lt;div class="row projects-slider-background background" id="projects-slider"&gt;
      &lt;img src="includes/uploads/up-arrow.png" class="hide-project text-center col-xs-offset-6 col-md-offset-6" alt="Back to Projects" /&gt;
      &lt;div id="myCarousel2" class="carousel slide" style="padding-top:10%"&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#myCarousel2" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel2" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel2" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel2" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;!-- Carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="active item project-1"&gt;
                  &lt;img class="row" src="includes/uploads/&lt;?=$project?&gt;/test1.jpg" /&gt;
  
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="row" src="includes/uploads/&lt;?=$project?&gt;/test2.jpg" /&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="row" src="includes/uploads/&lt;?=$project?&gt;/test3.jpg" /&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="row" src="includes/uploads/&lt;?=$project?&gt;/test4.jpg" /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- Carousel nav --&gt;
  
          &lt;a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- LINKED NAV --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>finally, the JQuery code:
      $(document).ready(function() {</p>
  
  <pre><code>    $(".show-gallery").click(function() {
          $.ajax({
              url: 'public/projects-content.php',
              type: 'POST',
              data: {
                  projectName: 'test'
              },
              dataType: 'json',
              success: function(data) {
                  $('#ajax').html(data);
  
  
              },
  
              error: function(jqXHR, textStatus, errorThrown) {
                  $('#ajax').html('');
                  alert('Error Loading');
              }
          });
  
          $("#ajax").load("public/projects-content.php", function(response, status, xhr) {
              if (status == "error_origin") {
                  var msg = "Sorry but there was an error when loading the page's content: ";
                  $("#ajax").html(msg + xhr.status + " " + xhr.statusText);
              }
          });
   });
  </code></pre>