Using infinite scrolling to load more content and extend the page?

Question

I am trying to use infinite scrolling to load the next 5 peices of content onto my screen without reloading the entire page. I have tried about a million things. I have the scroll bar tracking working great, but I have no idea how to set up an ajax request to load additional content when the scroll bar script is activated. Please help I have been stuck on this for two days.

here is my java script:

    <script type="text/javascript">
    function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    // Ajax call to get more dynamic data goes here
    wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}

window.onscroll = yHandler;
</script>

here is my php file to connect to my database:

    <?php

    # FileName="Connection_php_mysql.htm"
    # Type="MYSQL"
    # HTTP="true"
    $hostname_dbConn = "localhost";
    $database_dbConn = "Video";
    $username_dbConn = "root";
    $password_dbConn = "root";
    $dbConn = mysql_pconnect($hostname_dbConn, $username_dbConn, $password_dbConn) or trigger_error(mysql_error(),E_USER_ERROR); 

    ?>

Ask how to do ajax calls to begin....then ask how to do pagination queries with ajax, then marry the too, and you have infinite scrolling — Kylie, Jun 12 '13 at 18:06
Although,...this page might clear things up for you a bit http://stackoverflow.com/questions/6164767/infinite-scrolling-within-ajax-loaded-page?rq=1 — Kylie, Jun 12 '13 at 18:09

score 0 · Accepted Answer · answered Jun 12 '13 at 18:12

Note: As noted by other commenters, put together a better picture with the individual pieces, but this should at least get you on the right track.

The question is very broad but for the AJAX bit use jQuery! Simplest thing I can think of without getting into too many details.

JS

var last_grabbed = 5;
function scrollListen() {
    ...
    $.post('path/to/script.php',{ 'last_row' : last_grabbed },function(response) {
        $('.my-content-div').append(response);
        last_grabbed += 5;
    });
}

PHP

<?php
//your connection stuff, db select, etc
$row = $_POST['last_row']; //you should sanitize this though
$rs = mysql_query("SELECT ... LIMIT $row,5") or die(mysql_error());
while($row = mysql_fetch_assoc($rs)) {
?>
<!-- Do you HTML stuff here for each item !-->
<?php
}
?>

That should get you started. http://www.w3schools.com/php/php_mysql_intro.asp for more on the PHP side.

Thank you. As you can see I was not even remotely sure how to get started. This helps a lot. — JensenS, Jun 12 '13 at 22:22

Using infinite scrolling to load more content and extend the page?

1 Answers1

JS

PHP