title: Load More Content using Ajax/jQuery by returning <div>
body: <p>I'm working on a social site something like facebook where when you drag to the bottom of the page, new content will load. Instead, my page will have a more button instead of scrolling. Whenever a user click on the 'more' button, new content will load at the bottom.</p>
  
  <p>My page consist of three different columns. So, what I would like to do is adding 3 new different content to those 3 columns when the 'more' button is clicked.</p>
  
  <p>I would like to return a new div content inside the main column div using ajax and php. Something like this below.</p>
  
  <pre><code>&lt;div class='content_3'&gt;
    &lt;div class='widget'&gt;
      Content Here
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is an example of my page... Fiddle here <a href="http://jsfiddle.net/Lqetw5ck/2/" rel="nofollow noreferrer">http://jsfiddle.net/Lqetw5ck/2/</a></p>
  
  <pre><code>&lt;div id='main_column_1'&gt;
      &lt;div id='content_1'&gt;
          Load data from php/mysql database (For 1st Main Div)
      &lt;/div&gt;
      &lt;div id='content_2'&gt;
          Load more from php/mysql database when 'more' button is click
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id='main_column_2'&gt;
      &lt;div id='content_1'&gt;
          Load data from php/mysql database (For 2nd Main Dev)
      &lt;/div&gt;
      &lt;div id='content_2'&gt;
          Load more from php/mysql database when 'more' button is click
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id='main_column_3'&gt;
      &lt;div id='content_1'&gt;
          Load data from php/mysql database (For 3rd Main Dev)
      &lt;/div&gt;
      &lt;div id='content_2'&gt;
          Load more from php/mysql database when 'more' button is click
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;button&gt;Show More&lt;/button&gt;
  </code></pre>
  
  <p>And how should I write my PHP code? Because I'm going to return a whole div content. The idea I had is something like this below.</p>
  
  <pre><code>&lt;?
  $sql_stmt = "SELECT * FROM customers";
  $sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con));
  $row = mysqli_fetch_assoc($sql);
  $content = '&lt;div class="content_3"&gt;&lt;div class="widget"&gt; '.$row['firstname'].' &lt;/div&gt;&lt;/div&gt;';
  ?&gt;
  </code></pre>
  
  <p>I want to return the $content string back to the main column 1,2 and 3 so it will display a new div under that column.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: I found this <a href="https://stackoverflow.com/questions/17895916/how-to-implement-jscroll">How to implement jScroll?</a> but don't know how the author wrote his PHP code. Maybe this is almost the same as my case?</p>