How to make ajax load more content, using button pagination work

Question

I intend to load more videos into a div/page using load more button pagination with ajax, xhr status shows status as ok(200) but no video content is loaded.

videos.php :

<div id="videosline " class="col-md-3 content-grid ">

<?php //code to get first 3 videos working   ?>
</div>
<button id="loadvideos" class="btn ">Load More</button>

//ajax jquery code to load in more three videos at every button click

 $(document).ready(function(){
var videoscount = 3;
$("#loadvideos").click(function(){
    videoscount = videoscount + 3;
$.ajax({
     type:"GET",
     url:"loadmore.php",
     data:{

        'videosnewcount':videoscount
     },
     sucess: function(data){
        $('videosline').append(data);
     }

});

loadmore.php :

    <?php
       include 'master.php';//some php config and db config
       $videosnewcount = 3;
        $condition =  [];

        array_push($condition,['mediatype = ' => ['video/mp4','AND']]);



        $data = find('files',$condition,["ORDER BY " => "id DESC","LIMIT" => $videosnewcount ]); //php function for mysql query


        foreach($data as $video) { ?>

    <?php if($video['mediatype'] == 'video/mp4') { ?>


                <?php include('cards/video.php'); ?>



            } 
        }
        ?>

cards/video.php :

<?php if(explode('/',$video['mediatype'])[0] == 'video') { ?>
    <a href="mediafile.php?id=<?= $video['id']?>&medianame=<?= $video['filename']?>"><div style=" height:;">
<video  controlslist="nodownload"  oncontextmenu="return false;" poster="member/<?= $video['poster'] ?>" style="height:250px; width:100%; " type="video/mp4" class="pr100"  src="member/<?= $video['path'] ?>" > </video</div></a><?php } ?>

Answer 1

I don't know if it matters but in loadmore.php , you are not getting the GET parameter from the Ajax call so I don't know why you are sending it.

What do matters, is that loadmore.php is not echoing any data so your Ajax response should be empty. Also, I can't see that your sending any query to your database. Where is the "SELECT from table WHERE..."?

Answer 2

you have to pass offset for skip already loaded data.

 <?php
           include 'master.php';//some php config and db config
           $videosnewcount = $_GET["videosnewcount"];
            $condition =  [];

            array_push($condition,['mediatype = ' => ['video/mp4','AND']]);



            $data = find('files',$condition,["ORDER BY " => "id DESC","LIMIT" => 10, "OFFSET" => $videosnewcount ]); //php function for mysql query


            foreach($data as $video) { ?>

        <?php if($video['mediatype'] == 'video/mp4') { ?>


                    <?php include('cards/video.php'); ?>



                } 
            }
            ?>

in JS file

var videoscount = 0;


   $("#loadvideos").click(function(){

    $.ajax({
         type:"GET",
         url:"loadmore.php",
         data:{

            'videosnewcount':videoscount
         },
         sucess: function(data){
            videoscount = videoscount + data.length;
            $('videosline').append(data);
         }

    });

Answer 3

you need add 1 more "c" on your "success"

$.ajax({
    type:"GET",
    url:"loadmore.php",
    data:{'videosnewcount': videoscount},
    success: function(data){
        $('videosline').append(data);
    }
});