Adding ajax to infinite scroll

Question

I just created a method to run an infinite scroll on my website by creating the following function:

window.onscroll = yHandler;
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
 if(y >= contentHeight){
   wrap.innerHTML += '<div class="newData"></div>';
 }
}

It created a simple div when the user scrolls down on the page. I am calling it in my html here:

<div id="wrap">

        <img src="NYC.jpg">

</div>

I have just a larger picture that takes up room on my page for testing.

I want to add information from mysql using ajax but am having trouble doing so. I was using the following Ajax to interact with my database:

$.ajax({
      url: "scroll.php",
      data: "";
      dataType: 'json',
      success: function(result){
        //get the variables here.
      }
  });

My issue is, I dont understand how to call the function and the Ajax with each other to make it all work. I tried putting the Ajax in the function but that didn't seem to do anything. How can I call the function I created and the Ajax at the same time when ever a new div needs to be created?

My PHP is:

$return_arr = array();
$fetch = mysqli_query("SELECT User_Id, First_Name, Last_Name FROM Users"); 

while ($row = mysqli_fetch_array($fetch, MYSQLI_ASSOC)) {
    $row_array['User_Id'] = $row['User_Id'];
    $row_array['First_Name'] = $row['First_Name'];
    $row_array['Last_Name'] = $row['Last_Name'];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

Answer 1

The "result" variable is actually your response from the sql database which is JSON (as mentioned in the comments). Since you didn't give your php script (to see your sql select statement) then put your SQL column_name (attribute) instead of "your_sql_column_name".

var array = [];
   $.ajax({
   type: "GET",
   url: "scrol.php",
   dataType: "json",
   success: function (result) // response is already JSON, dont' need to parse
   {

       alert(result[0].your_sql_column_name); // testing purpose 
        for (var i = 0; i < num_of_elements; i++) {

       array.push(result[i].your_sql_column_name); //storing values inside an array   
      }

   }


 });

Answer 2

I believe that the simplest way of making your code work would be to modify your if statement like this:

if(y >= contentHeight){
  $.ajax('scroll.php').done(function(data) {
    // variables: data['variable_name']
    // or if returning HTML:
    wrap.innerHTML += '<div class="newData">' + data + '</div>';
  })
}

However, consider that as soon as you scroll beyond the content of the site, you will send a request to scroll.php for every scroll event - that can flood the server, and therefore I suggest wrapping the call in a debounce function. A debounce function will basically let you call a function once in a given time interval. If you do not want to write your own debounce function, I suggest the underscore library: http://underscorejs.org . The code would then look like this:

if(y >= contentHeight){
  _.debounce(
    $.ajax('scroll.php').done(function(data) {
      wrap.innerHTML += '<div class="newData">' + data + '</div>';
    }
  ), 1000) // Only fetch once every second
}