Endless Scroll with Jquery, PHP, and Ajax - php

Question

So I'm trying to impliment an endless scroll pulling from a table in my mysql database and I have it so that when the bottom of the page is reached it will call for a new number of reviews to be pulled to the newsfeed but for some reason when it gets to the bottom but just shows the loading gif and nothing new loads. Any help where I am messing up would be awesome. Thanks guys
Here is my jquery/ajax:
<script>
//Script to continue the home newsfeed after 10 posts
$(window).scroll(function() {
if($(window).scrollTop() === $(document).height() - $(window).height()) {
$('div#load_more_posts').show();
$.ajax( {
url: "load_more_posts.php?lastPost=" + $(".display_newsfeed:last").attr("id"),
success: function(html) {
if(html) {
$("#outputDiv").append(html);
$('div#load_more_posts').hide();
} else {
$('div#load_more_posts').replaceWith("<center>Finished loading all Posts!</center>")
}
}
});
}
});
</script>
Here is the part of the code where the newsfeed is called:
<div class="outputDiv">
<?php echo "$outputList"; ?><!-- Div for this output has been declared above in PHP before echoing -->
</div> <!-- END outputDiv -->
<div id='load_more_posts' style="display:none">
<center>
<img src="../../images/loading.gif" alt="Loading" />
</center>
</div>
And lastly, Here is the Newsfeed display for each review (display_newsfeed.php):
$review_query = mysql_query("SELECT * FROM `reviews` ORDER BY `review_date` DESC LIMIT 0,10");
while($review_row = mysql_fetch_assoc($review_query)){
$review_title = $review_row['review_title'];
$user_id = $review_row['user_id'];
$user_firstname = $review_row['user_firstname'];
$user_lastname = $review_row['user_lastname'];
$review_id = $review_row['review_id'];
$review_body = $review_row['review_body'];
$review_referral = $review_row['review_referral'];
$outputList .= '
<div class="display_newsfeed" id="'.$review_id.' display_newsfeed">
This code is each review
</div>
';

Answer 1

You're missing a closing bracket in your while loop in display_newsfeed.php. You're also referencing a div with an ID of 'outputDiv' in your javascript, but that element doesn't exist (you're assigning it a CLASS of 'outputDiv' in the HTML). Not sure if these were just typos pasting the code here, but either of those could definitely cause the issue.
If none of those is the issue, the best next step would be identifying where the problem is. If your browser has a developer console (or firebug), double check that the AJAX request is going out and see if it's returning the expected HTML. If it is, the problem is definitely with the client-side code (specifically something in the success callback, unless the request isn't going out at all). If not, the problem is definitely with the script on the server.