Laddar fler objekt från databasen ~ Infinite Scroll

Det här är en ganska komplicerad fråga. Innan du försöker koda din egen variant från början, föreslår jag att du tar en titt på Infinite Scroll jQuery Plugin . Om det inte löser det, här är en möjlig lösning:

Javascript

$(document).ready(function () {
    loadData( 0 );
    //Hide Loader for Infinite Scroll
    $('div.ajaxloader').hide();

});

function loadData ( last_id ) {
    var $entries = $('#entries'),
        $loader = $('.ajaxloader', $entries).show();
    $.get( '/getentries.php', { last_id : last_id }, function( data ) {
        $entries.append( data ).append( $loader.hide() );
        filterEntries();
    });
};


//Isotope filter - no changes to this code so I didn't include it

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $('div.ajaxloader').show('slow');
        loadData( $( '#entries item:last' ).data('id') )
    }
});

PHP

<?php
//Connect to Database
$con = new mysqli( 'localhost', 'root', 'root', 'awards' );
if( $con->connect_errno ) {
    die( 'Could not connect:' . $con->connect_error );
}

$last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : 0; 
$stmt = $con->prepare( 'SELECT * FROM entry WHERE status = "registered" AND entry_id > (?) ORDER BY entry_id LIMIT 0, 30' );
$stmt->bind_param( 'i', $last_id );
$stmt->execute();

$result = $stmt->get_result();    
while( $row = $result->fetch_assoc() ) {
    //Get award cat ids
    $awardcat = $row['awards_subcategory_id'];

    print "<div class='item item$awardcat clearfix' data-id='" . $row['entry_id'] . "'>";//add award cat id to each div
    print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
    print "<p > Studio: " . $row['studio'] . "</p>";
    print "<p class='client'> Client: " . $row['client'] . "</p>";
    print "<p class='description'> Description: " . $row['description'] . "</p>";
    print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
    print "</div>";

}
$con->close();

Javascript-koden skickar en AJAX GET-förfrågan till php-skriptet med id för den senaste posten som visas i listan. PHP-skriptet returnerar sedan 30 poster som kommer efter det ID:t. Den ursprungliga Javascript-filen hade lite PHP-kod i sig. Jag tog bort det, eftersom jag inte vet vad dess syfte är (matar du ut JS från ett PHP-skript kanske?). Dessutom hela XMLHttpRequest koden kan förkortas till $.get() fungera. Du använder jQuery ändå, så du behöver inte uppfinna hjulet på nytt. Jag använde data-id attribut för att överföra inmatnings-id:n. Det är ett HTML5-specifikt attribut. Om du inte vill använda det, använd bara id istället, men kom ihåg att id inte kan börja med en siffra - du bör prefixa den med en bokstav.

I PHP-skriptet använde jag mysqli istället för mysql_* funktioner. Du bör använda mysqli eller PDO från och med nu, eftersom de är mer tillförlitliga och säkrare än den (nu utfasade) mysql_* . Din PHP-installation innehåller troligen redan dessa tillägg. Observera att jag inte hanterade databasförfrågningsfel. Du kan skriva den koden själv. Om du får andra typer av fel, posta dem här så ska jag försöka fixa dem.