How is infinite scrolling made? - php

Question

How struggling to make a PHP call to get items to load on scroll. I have a while loop of items and need a php code for infinity.php to load more items to the ID "stream" but can't figure out a solution. Would be greatful for some expertise help!
PHP on Main-page:
<?php
$getStream = mysql_query("SELECT * FROM ".$DBprefix."xxx WHERE xxx='xxx' AND status='1' ORDER by id");
$counter = 0;
$max = 2;
while($stream = mysql_fetch_array($getStream) and ($counter < $max)) {
$counter++;
}
?>
I have this Jquery:
function lastAddedLiveFunc()
{
$('div#loader').fadeIn();
$.get("infinity.php", function(data){
if (data != "") {
//console.log('add data..');
$("#stream").append(data);
}
$('div#loader').empty();
});
};
HTML:
<div id='stream'></div>

Answer 1

I think you're missing a few key pieces here. Firstly, when we use infinte scroll and we're fetching data from the database, you need a LIMIT clause, the LIMIT clause allows for a offset, total relationship. where offset indicates the row to start at, and total is how many rows we want to take.
Initially, you'll have something like this
$offset = $_GET['offset'] ? $_GET['offset'] : 0; //start at 0th row if no variable set
$total = $_GET['total'] ? $_GET['total'] : 20; // get 20 rows if no variable set
In the above, we're using ternary variable assignment to check if an argument is being passed to us, if not, then we use the default value. We're going to use mysqli and the prepared, bind_param, execute, bind_result and fetch_assoc() methods.
if( $getStream = $mysqli->prepare("SELECT * FROM ? WHERE xxx=? AND status=? ORDER by id LIMIT ?,?"):
$ret = ''; // a variable place holder
// in the above statement, fill in the ?'s
// the actual ? will be the value we wish to return, in order from first to last.
$getStream->bind_param('ssddd', $DBprefix.'xxx', 'xxx', 1, $offset, $total);
//execute our query
$getStream->execute();
$getStream->bind_result($field1, $field2, $field3, $field4); // each field needs it's own variable name, that way we can access them later.
while($row = $getStream->fetch_assoc()):
$ret .= '<div class="my-infinite-element"><h3>'. $field1 .'</h3><p>'. $field2.'</p>'. $field3 .', '. $field4 .'</div>';
endwhile;
echo $ret;
else:
return FALSE;
endif;
Now that's how we'll handle getting our data back using MySQLI; now let's make the ajax statement to get the data back.
$.ajax({
type: 'GET',
url : 'infinity.php',
data: {
'offset' : $('.my-infinite-elements').length,
'total' : 20
},
success: function(data){
if(false !== data){
$('#stream').append(data);
}
}
});
In the above, the only thing we should be worried about is $('.my-infinite-elements').length. We used a class of my-infinite-elements for each element we returned. This way, we can count the existing length of elements on the page, which will provide our offset value (or where we want to start getting the rows from). If we pulled out 20 results from our DB, it's 0 based, so we'll get 0-19. When we do .length, we're going to get a 1 based result, which will return 20, instead of 19. That's okay, because we DON'T want the very last row returned also, so our logic is fine. The two variables offset/total in our ajax function, correspond to our ternary variable assignment.