Using AJAX call to get dynamic data to load in '<div>' when user reaches the bottom

Question

I am trying to implement a functionality which loads more data from the database when the user reaches the end of a 'div', similar to twitter. I have a 'div' called 'userposts_panel' which consists of several other divs which are used to display content from the database. Ie

<div id="userposts_panel">   
    <?php echo "<br/>
            <div class='new_msg'>  
               <div class='user_dp'>
                 <img src='$profile_pic' width= '65px' height= '68px'/>
               </div>
               <div class='msg_content'>
                    <span>$message_content </span> <br/> <br/>
               </div>
               <div class='user_details'> 
                    <span>Posted by: </span> 
                    <a href='$thoughts_by'> <b> $name_of_user </b> </a> on $date_of_msg 
               </div>
            </div><br/>"; ?>
</div>

I have the following JavaScript defined which obtains all mathematical data, such as when the user has reached the end of the page etc. But I am unable to figure out how I am suppose to get new data from the database and post it on the same page (see if statement). At the moment I have a query which displays 10 posts from the database on the page - LIMIT 1 , and when the user scrolls to the bottom of userposts_panel , I need it to display the userposts_panel which 10 new posts in addition to the ones which are already displayed.

 function yHandler (){
    var userposts_panel = document.getElementById('userposts_panel');   
    var contentHeight = userposts_panel.offsetHeight; // get page height
    var yOffset = window.pageYoffset;// get vertical scroll position - find out where user is on scroll.
    var y = yOffset + window.innerHeight;

     if (y >=contentHeight){ // if the user scroll to the very bottom, do this..
         userposts_panel.innerHTML += '<div class="userposts_panel"></div>'
         // AJAX call to get more dynamic data here...

         }
 }
    // event listner
    window.onscroll = yHandler;

Do I have to create a new div rather than using the userposts_panel to display new content as it already exists? And how do I get it to load data from the database in the div using AJAX?

Answer 1

I try to separate the answer into several parts.

a) Handler to while reaching the bottom of the page

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        //Run the ajax call or other here
    }
});

b) Do the ajax call to get new data

var url = "http://____";  //API url
var data = "page=2&tar=xx";  //parameters
$.ajax(
    {
        data: data,
        dataType: 'json',
        type: "POST",
        url: url,
        success: function(response) {
           // Handle the new data here
        }
    }
);

c) Place the new data into the pages

//Here is just an example on placing data via jquery, for your reference
//To make it simple, you may do it on the server side

$.each(response.data,function(key,value){  //run a loop on the response data, it should be in json format
    var clone_grid = $(".new_msg").last().clone();  //Copy the last new msg div
    clone_grid.find('.user_dp').attr('src',value.image);//change the images of the clone div
    clone_grid.find('.msg_content').html(value.message);//change the message of the clone div
    //...
    //...
    $("#userposts_panel").append(clone_grid);//Place it to the end of the #userposts_panel div
}

I hope it can solve your problem and sorry for my poor English.