CODEWITHSUNDEEP
phpjquerypaginationinfinite-scroll
cgauss
cgauss

Reputation: 324

Endless pagination php ajax

I am trying to create an endless pagination with ajax php and jQuery. The php script works, but I can't get the ajax to implement the next rows.

<script type="text/javascript">
  $(document).scroll(function(){
   var h = $('#content').height() * .6;
   var startrow = 10;
      if($(window).scrollTop() + $(window).height() > h){
       $.ajax(
       {
              url: "morerows.php",
              type:GET,
              data: startrow
              })
       }
   });  
</script>

Here is the file being called this is the same format as the first rows being drawn from the database

<?php
  $startrow = $_GET['startrow'];
  $dbc = @mysqli_connect('localhost', 'cgauss', 'cgauss', 'livve');
  $q = "SELECT * FROM users ORDER BY id DESC LIMIT $startrow, 10";
  $r = @mysqli_query($dbc, $q);
  $i = 1;
 while($page = mysqli_fetch_assoc($r)){          
    echo'<div class="post'.$i.'"><h1 class="ptitle'.$i.' ptitle">'.$page['name'] .' <span class="black">'.$page['type']. '</span>:</h1><br/>';
    echo'<div class="goal'.$i.'">The Goal:<p class="goalp'.$i.' goalp">  '. $page['goal'].'</p></div><br/>';
    echo'<div class="media'.$i.'">';
     $type = substr($page['imagename'],-3);
    if($type == "jpg" || $type == "png" || $type == "gif")
{
    echo '<div class="image'.$i.'"><img id="theimage" class="lazy" src="uploaded/'.$page['imagename'].'" data-original="uploaded/'.$page['imagename'].'" width="85%" /> </div>';
    }
else if($type == "mp4"){
    echo '<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="85%"  poster="my_video_poster.png" data-setup="{}">
    <source src=uploaded/'.$page['imagename'].' type="video/mp4">
    </video>';
}else{
    echo '';
}
 echo'</div>';
 echo'<div class="description'.$i.' description">Description:<p class="descriptionp">  '.$page['comment'].'</p></div></div><b/>';
 $startrow = $startrow +10;
         $i++;
         if($i == 5){
             $i =1;
         }

         }
         ?>

Upvotes: 0

Views: 909

Answers (1)

Jasper
Jasper

Reputation: 101

You'll have to use the ajax done function in order to do something with the data that you retrieve from the ajax. For example:

$.ajax({
  type: "GET",
  url: "morerows.php",
  data: startrow
}).done(function( msg ) {
  alert( "Data: " + msg );
});

Upvotes: 2

Related Questions