title: Ajax call to add more content to div
body: <p>I have a div with a bunch of article blog posts, the number of blog posts in my div are determined by a php variable called quantity. I want to write an ajax call for when I scroll to the bottom of the page that the quantity updates and loads more blog posts. Below is my code so far and it updates the quantity of articles when I hit the bottom of the page but the posts don't appear on the page</p>
  
  <pre><code>var quantity = &lt;?php echo $quantity; ?&gt;
  //Scroll to bottom of page 
   $(window).scroll(function () {
      if ($(document).height() &lt;= $(window).scrollTop() + $(window).height()) {
          // ajax call should go here
          $.ajax({
              type: "GET",
              url: 'index.php',
              success: function(data) {
                  quantity = quantity + 10;
                  alert("end");
              }
          });
      }
  });
  </code></pre>
  
  <p>The quantity variable is updating when reaching the bottom of the page but the blog posts are not loading in the html,this is my first time using ajax and not sure what I'm missing to update the div with more posts, when I change the set number of the quantity varible manually in the code more posts show up but not when its updated through my ajax?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>here is the php file </p>
  
  <pre><code>&lt;?php 
  $articleIndex = 0;
  $bigImageCounter =  0;
  $smallImageCounter = 0;
  $quantity = 46;
  $omitThis = 0;
  $cat_id = $mpArticle-&gt;data['cat_id'];
  
  $featuredArticle = $mpArticle-&gt;getFeaturedArticle( $cat_id );
  if( $featuredArticle &amp;&amp; $featuredArticle['article_status'] == 1){
      $articleIndex++;
      $quantity = 46;
      $omitThis =  $featuredArticle['article_id'];
  
      include_once($config['include_path'].'featured_article.php');
  
  if(isset($has_sponsored) &amp;&amp; $has_sponsored){ /*DO NOTHING*/ }
  else{ ?&gt;
      &lt;!-- ShareT --&gt;
      &lt;div id="shareT-ad" style="margin-bottom: 0.5rem;" class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding padding-bottom"&gt;
          &lt;div data-str-native-key="6898172d" style="display: none;"&gt;&lt;/div&gt;
          &lt;script type="text/javascript" src="//native.sharethrough.com/assets/str-dfp.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
      &lt;hr class="padding-top"&gt;
      &lt;?php }
  }
  
  $articlesList = $mpArticle-&gt;getArticlesList(['limit' =&gt; $quantity, 'omit' =&gt; $omitThis, 'withMobLogs'=&gt; true ]);
  
  
  /* Article List */
  $totalArticles = count($articlesList );
  
  foreach ($articlesList as $articles){
  
      $linkToArticle = $config['this_url'].$articles['cat_dir_name'].'/'.$articles["article_seo_title"];
      $linkToACategory = $config['this_url'].$articles['cat_dir_name'];
      $date = date("M d, Y", strtotime($articles['date_updated']));
      $linkToImage = 'http://cdn.puckermob.com/articlesites/puckermob/large/'.$articles['article_id'].'_tall.jpg';
      $linkToContributor = $config['this_url'].'contributors/'.$articles['contributor_seo_name'];
      $cat_name = $articles['cat_dir_name'];
  
      //IGNORE MOBLOG ARTICLES
      if( !isset($category_page) &amp;&amp; $cat_name === "moblog" &amp;&amp; $articles['article_featured_hp'] != 1) continue;
  
      if( $articleIndex % 7 == 0 ) { 
          $articleIndex++;
          $bigImageCounter++; 
          ?&gt;
          &lt;div class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding" id="&lt;?php echo 'article-'.$articleIndex;?&gt;"&gt;
              &lt;a class="mobile-5 small-5 medium-5 large-12 xlarge-12 " href="&lt;?php echo $linkToArticle; ?&gt;"&gt;
                  &lt;img src="&lt;?php echo $linkToImage; ?&gt;" alt='&lt;?php echo $articles['article_title']?&gt;'&gt;
                  &lt;?php if(isset($_GET['show']) &amp;&amp; $_GET['show'] == 'type'){
                          if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                      echo '&lt;span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; "&gt;';
                      echo $type;
                      echo '&lt;/span&gt;';
                      }?&gt;
              &lt;/a&gt;
              &lt;div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top"&gt;
                  &lt;p class="left uppercase" &gt;
                      &lt;!--&lt;span class="span-category &lt;?php //echo $articles['cat_dir_name']?&gt;"&gt;&lt;a href="&lt;?php //echo $linkToACategory; ?&gt;" &gt;&lt;?php //echo $articles['cat_name']?&gt;&lt;/a&gt;&lt;/span&gt;--&gt;
                      &lt;span class="span-date"&gt;&lt;?php echo $date; ?&gt;&lt;/span&gt;
                  &lt;/p&gt;
                  &lt;p class="right uppercase"&gt;
                      &lt;span class="span-author"&gt;By &lt;a href="&lt;?php echo $linkToContributor; ?&gt;" &gt;&lt;?php echo $articles['contributor_name']; ?&gt;&lt;/a&gt;&lt;/span&gt;
                  &lt;/p&gt;
                  &lt;a class="left clear-left" href="&lt;?php echo $linkToArticle; ?&gt;"&gt;
                      &lt;h1 class="h1-large-article"&gt;&lt;?php echo $articles['article_title']?&gt;&lt;/h1&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php if( $articleIndex &lt; $totalArticles )?&gt; &lt;hr class="padding-top"&gt;
  
          &lt;?php if($bigImageCounter == 1){?&gt;
          &lt;?php }?&gt;
  
          &lt;?php  } else{
  
              $clearLeft='no-padding-right'; 
              if( $smallImageCounter == 0 || $smallImageCounter % 2 == 0) $clearLeft = 'clear-left no-padding-left';
              $smallImageCounter++;
              $articleIndex++; 
          ?&gt;
              &lt;div class="articles columns mobile-12 small-12 medium-6 large-6 xlarge-6 &lt;?php echo $clearLeft; ?&gt; ggnoads" id="&lt;?php echo 'article-'.$articleIndex;?&gt;"&gt;
                  &lt;a class="mobile-5 small-5 medium-12 large-12 xlarge-12 " href="&lt;?php echo $linkToArticle; ?&gt;"&gt;
                      &lt;img src="&lt;?php echo $linkToImage; ?&gt;" alt='&lt;?php echo $articles['article_title']?&gt;'&gt;
                      &lt;?php if(isset($_GET['show']) &amp;&amp; $_GET['show'] == 'type'){
                          if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                      echo '&lt;span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; "&gt;';
                      echo $type;
                      echo '&lt;/span&gt;';
                      }?&gt;
                  &lt;/a&gt;
                  &lt;div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top"&gt;
                      &lt;p class="uppercase small-7 left small-font"&gt;
                          &lt;!--&lt;span class="span-category &lt;?php //echo $articles['cat_dir_name']?&gt;"&gt;&lt;a href="&lt;?php //echo $linkToACategory; ?&gt;" &gt;&lt;?php // echo $articles['cat_name']?&gt;&lt;/a&gt;&lt;/span&gt;--&gt;
                          &lt;span class="span-date"&gt;&lt;?php echo $date; ?&gt;&lt;/span&gt;
                      &lt;/p&gt;
                      &lt;p class="right uppercase small-5 align-right small-font"&gt;
                          &lt;span class="span-author"&gt;By &lt;a href="&lt;?php echo $linkToContributor; ?&gt;" &gt;&lt;?php echo $articles['contributor_name']; ?&gt;&lt;/a&gt;&lt;/span&gt;
                      &lt;/p&gt;
                      &lt;a class="left clear-left" href="&lt;?php echo $linkToArticle; ?&gt;"&gt;
                          &lt;h1 class="h1-small-article"&gt;&lt;?php echo $articles['article_title']?&gt;&lt;/h1&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;?php 
              if( $smallImageCounter % 2 == 0  &amp;&amp; $articleIndex &lt; $totalArticles) echo '&lt;hr class="padding-top"&gt;';
          } ?&gt; 
      &lt;/div&gt;
  
      &lt;?php } ?&gt;
      &lt;style&gt;
      .str-adunit.hosted-video.str-collapsed, .str-adunit.clickout.str-collapsed{border:none !important;}
      &lt;/style&gt;
  </code></pre>
  
  <p>and my updated ajax call is now appending the articlesList again since thats what I'm calling, but not quite sure how to just load the the articles that have come before the ones in articlesList and load only 10 at a time, sorry but I am very new to php and ajax and trying to work in this codebase</p>
  
  <pre><code>&lt;script&gt;
  
  var articles = &lt;?php echo $articlesList; ?&gt;
  //Scroll to bottom of page 
   $(window).scroll(function () {
      if ($(document).height() &lt;= $(window).scrollTop() + $(window).height()) {
          // ajax call should go here
          $.ajax({
              type: "GET",
              url: 'index.php',
              data: articles,
              success: function(data) {
                  $("#puc-articles").append(articles);
              }
          });
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope this makes things more clear, Just need to append 10 articles at a time that are not already in artclesList.</p>