How can I load more content from Database Using Jquery or Ajax

Question

I'm working on a social site something like quora, when you drag to the bottom of a page, new content will load. but in my app, it will be different 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.

In my PHP code I fetch all content from database without limit and then I use jQuery to slice and make my page load more items just like this.

$("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".more:hidden").slice(0, 10).slideDown();
        if ($(".more:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
    });

But I don;t know if this is best practice although it works well for me now, but I believe that in the future I might have difficulties loading my page, I thing my page can become very slow while loading.

I use the twig template engine so I cannot echo out data from my backend script and display with ajax

because my frontend looks like this.

<div class="card blogBox moreBox" id="single_user_card">
<div class="card-header card-header-borderless d-flex justify-content-between">
  <div class="text-small ">
      <ul class="list-inline">
        <li class="list-inline-item">
          <img alt="Image" src="{{ p.author_avatar }}" class="avatar avatar-sm" />
        </li>
          <li class="list-inline-item font-weight-bold"> {{ p.author_username |title |raw }}
            <p class="text-muted text-small post-time font-weight-light">{{ p.post_date |time_diff }}</p>
          </li>

          <li class=""></li>
      </ul>
  </div>

  <div class="d-lg-flex justify-content-end">
    <div class="dropdown">
      <a class="dark-link" href="#" id="share_dropdown_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="icon-menu"></i>
      </a>

      <div class="dropdown-menu" aria-labelledby="share_dropdown_menu">

        <span postid="{{APPURL}}/article/{{p.id}}/{{p.post_name}}/{{ base64_encode('this token is valid for one hour') }}">
          <a href="javascript:void(0);" class="dropdown-item copy_link">
            <i class="icon-share"></i> Copy link
          </a>
        </span>



        {% for u in user_details %}
          {% if u.id == 2 or u.id == 1 %}
            <a  href="/deletepost?author={{p.post_author}}&postid={{p.id}}" class="dropdown-item"> <i class="icon-trash"></i> Delete Post</a>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>

</div>

<div class="card-body pl-0 pr-0 pb-0">
  <div class="mx-3 my-2">

      <a href="/article/{{p.id}}/{{p.post_name}}/{{ base64_encode('true') }}" class="dark-link">
        <span class="h5 mb-2 font-weight-bold">{{ p.post_title |clean_special_char |truncate(100) |raw }}</span>
      </a>
      <article class="truncate">
        {{ html_entity_decode(p.post_content) |clean_special_char |raw |nl2br }}
      </article>

  </div>

  {% if p.post_media != '' %}
  <div class="">
    <img alt="{{p.post_title}} image" src="{{ p.post_media }}" class="img-fluid" data-action="zoom" />
  </div>
  {% endif %}

  <hr class="my-1 mx-5">

  {% include "/pages/inner/like-buttons.html" %}

</div>

Can I get any help or idea on what to do in this situation. I already Have the app running online, you can take a look here to better understand what I mean.

Answer 1

Add a variable of last id $lastid and override it when post loads and set $lastid to last post's database id, then select the post which one's id is greater than that $lastid.This method is fast and efficient also.

<script>
        var lastid = 1;
        function fetchpost() {
              $.ajax({
                url:"getPosts.php?lastid="+lastid, //the page containing getting post code
                type: "post",
                dataType: 'json',
                data: '',
                success:function(result){  
                  $("#posts_parent").after(result);
                  //Getting id of last post using :last
                  lastid = $("posts_parent:last").attr("id");
               }
             });
         }
    <script>
    <div id="posts_parent">

    </div>
<button onlclick="fetchpost()">Fetch New Posts</button> //Button fetches new posts

PHP:

<?php
$lastidofpost = $GET['lastid'];
$sql=mysql_query("SELECT * FROM posts ORDER BY id DESC WHERE id > $lastidofpost  LIMIT 10"); // Limit 10, only 10 posts will be fetched
while($row=mysql_fetch_array($sql))
{
    $id= $row['id'];
    $postDiscription = $row['disc'];
?>
    <div id="<?php echo $id; ?>"> 
       <?php echo $postDiscription; ?>
    </div> 
<?php
} 
?>