explanation of few statements in ajax code - php

Question

i am doing a social media project via udemy. the instructor has done ajax for infinite scrolling.the ajax part.i am having doubts regarding it in some lines.
NOTE-posts_area is an empty div where we are going to load the posts
explanation of the $(window).scroll(function() ???
$(document).ready(function() {
$('#loading').show();
//Original ajax request for loading first posts
//$.ajax is a jquery to perform ajax request
$.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=1&userLoggedIn=" + userLoggedIn, //what does this mean ???
cache:false,
success: function(data) {
$('#loading').hide();
$('.posts_area').html(data);//post area is a empty div created to enter the posts
}
});
$(window).scroll(function() {
var height = $('.posts_area').height();
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') { //if noMorePost is true this wont execute aka there are posts to be loaded
$('#loading').show(); //show loading gif while more posts are loaded
var ajaxReq = $.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
cache:false,
success: function(response) {
$('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
$('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts
$('#loading').hide();
$('.posts_area').append(response);
}
});
} //End if
return false;
}); //End (window).scroll(function())
});
the ajax file
<?php
include("../../config/config.php"); //has mysql connection variable
include("../classes/User.php");
include("../classes/Post.php");
$limit=10; //no of posts to be loaded per call(we dont want everthing to load at the same time)
$posts=new Post($con, $_REQUEST['userLoggedIn']);
$posts->loadPostsFriends($_REQUEST,$limit);
?>
what does the following statements do ??
data: "page=1&userLoggedIn=" + userLoggedIn
$('.posts_area').html(data);

Answer 1

Comments added to your code should hopefully explain each step.
$(window).scroll(function() {
//get the height of the area that you are wanting to use infinite scroll on (doesn't appear to be used.....)
var height = $('.posts_area').height();
//see how far down you have scrolled (doesn't appear to be used.....)
var scroll_top = $(this).scrollTop();
//look for an element with class 'nextPage' and get it's value (weird way of doing it - would guess the value is a URL
var page = $('.posts_area').find('.nextPage').val();
//see if class noMorePosts exsits in posts_area -> will return false if it does not.
var noMorePosts = $('.posts_area').find('.noMorePosts').val();
//the function we are in is called every time the user scrolls the page.
//this part looks to see if you have scrolled to the bottom of the page (is the total scroll height equal to the amount you have scrolled plus the height of the page) -> if it is (and the 'noMorePosts' class is not found, run the function.
//As a side note the methods used in this example are terrible and prone to lots of errors and problems so just be careful that you don't try and use them in a live website.
if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') { //if noMorePost is true this wont execute aka there are posts to be loaded
$('#loading').show(); //show loading gif while more posts are loaded
//make ajax call
var ajaxReq = $.ajax({
//url to call
url: "includes/handlers/ajax_load_posts.php",
//type of request
type: "POST",
//as this is a POST request you will send some data -> this is that data, you are sending the page (value defined above) and the userLoggedIn variable (which must be defined elsewhere)
data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
//do not cache the response (so if you ask for the same info the server still processes the request)
cache:false,
//think you should get the rest
success: function(response) {
$('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
$('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts
$('#loading').hide();
$('.posts_area').append(response);
}
});
} //End if
return false;
}); //End
//calling the scroll function on page load? Also this seems an odd way of doing it but who am I to judge :-P
(window).scroll(function())