Infinite Scrolling system with PHP and jquery/ajax
one text
I'm trying to implement an infinite scrolling system in a project I'm working on. As it happens, I'm having quite a bit of trouble with it. The PHP is my code and the jquery/ajax is not my code and I'm having a hard time getting them to work properly together. I'm not very comfortable with jquery/ajax and I'm hoping I can get some help, solutions, advice, another set of eyes etc. The set up is as follows -> this is the very simple ajax load_posts.php
<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/qcic/assets/core/init.php");
$user = new User();
$posts = new Post();
$limit = 10; // loaded posts per call
$posts->getUserPosts($_REQUEST['page'], $limit);
This is my getUserPosts() method:
public function getUserPosts($page, $limit) {
if($page == 1) {
$start = 0;
} else {
$start = ($page - 1) * $limit;
}
// prepare for db query
$table = "un_posts";
$field = "deleted";
$value = "no";
$rule = "ORDER BY id DESC";
$query = $this->_db->get($table, array($field, "=", $value), $rule);
$this->_data = $query->all(); // $this->_data is an array of objects
$str = ""; //html string to return
if (count($this->data()) > 0) {
$num_iterations = 0; # number of results checked (not necessarily posted)
$count = 1;
$cnt = 0;
while($cnt < count($this->data())) {
//create post_data array
$post_data = array(
"id" => $this->data()[$cnt]->id,
"content" => $this->data()[$cnt]->content,
"added_by" => $this->data()[$cnt]->add_by,
"date_added" => date("F d, Y H:i:s", strtotime($this->data()[$cnt]->date_added)),
"user_to" => $this->data()[$cnt]->user_to,
);
//prepare user string if it's not posted to a user
if ($post_data["user_to"] == "none") {
$user_to = "";
} else {
$user_to_obj = new User($post_data["user_to"]);
$user_to_firstname = $user_to_obj->data()->firstname;
$user_to_lastname = $user_to_obj->data()->lastname;
$user_to = "to <a href='" . $post_data["user_to"] ."'>" . $user_to_firstname . " " . $user_to_lastname . "</a>";
}
//check if poster has account closed
$added_by_obj = new User($post_data["added_by"]);
if ($added_by_obj->isClosed()) {
continue;
}
if($num_iterations++ < $start) {
continue;
}
//load 10 posts and break
if($count > $limit) {
break;
} else {
$count++;
}
//timeframe
.. code remove for irrelevancy to this question
$str .= "
<div class='status_post'>
<div class='post_profile_pic'>
<img src='../usernet/img/profile_pics/{$profile_pic}' width='50'>
</div>
<div class='posted_by'>
<a href='{$post_data['added_by']}'> {$name} </a> {$user_to} {$time_message}
</div>
<div id='post_body'>
{$post_data['content']}
<br>
</div>
</div>
<hr>";
$cnt++;
} //end while loop
if($count > $limit) {
//keeping these hidden just to store the values
$str .= "<input type='hidden' class='nextPage' value='" . ($page + 1) . "'>
<input type='hidden' class='noMorePosts' value='false'>";
} else {
$str .= "<input type='hidden' class='noMorePosts' value='true'><p style='text-align: centre;'> No more posts to show!</p>";
}
}
echo $str;
}
and here is the jquery/ajax script:
<script>
var userLoggedIn = '<?php echo $user->data()->username; ?>';
$(document).ready(function() {
$('#loading').show();
//Original ajax request for loading first posts
$.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=1&userLoggedIn=" + userLoggedIn,
cache: false,
success: function(data) {
$('#loading').hide();
$('.posts_area').html(data);
}
});
$(window).scroll(function() { //window object scroll event created
var height = $('.posts_area').height(); //Div containing posts
var scroll_top = $(this).scrollTop();
var page = $('.posts_area').find('.nextPage').val();
var noMorePosts = $('.posts_area').find('.noMorePosts').val();
if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {
$('#loading').show();
var ajaxReq = $.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=" + page + "&userLoggedIn=" + userLoggedIn,
cache: false,
success: function(data) {
$('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
$('.posts_area').find('.noMorePosts').remove(); //Removes current .nextpage
$('#loading').hide();
$('.posts_area').append(data);
}
});
} //End if
return false;
}); //End (window).scroll(function())
});
I've been trying to figure it out for days and haven't been able to get it to work. Right now it only shows the first 10 posts ($limit) and stops there with no scrolling functionality at all. I'm pretty lost in the jungle with it right now and need some help. If anyone has the time and will I'm hoping to get more sets of eyes on it to tell me where I've gone wrong. Thanks
Source