Indlæser flere elementer fra databasen ~ Infinite Scroll

Dette er et ret komplekst spørgsmål. Før du prøver at kode din egen variant fra bunden, foreslår jeg, at du tager et kig på Infinite Scroll jQuery Plugin . Hvis det ikke løser det, er her en mulig 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 sender en AJAX GET-anmodning til php-scriptet med id'et for den sidste post vist på listen. PHP-scriptet returnerer derefter 30 poster, der kommer efter det id. Den originale Javascript-fil havde en smule PHP-kode i sig. Jeg fjernede det, da jeg ikke ved, hvad dets formål er (udskriver du JS'en fra et PHP-script måske?). Også hele XMLHttpRequest koden kan forkortes til $.get() fungere. Du bruger alligevel jQuery, så du behøver ikke at genopfinde hjulet. Jeg brugte data-id attribut for at overføre indtastnings-id'erne. Det er en HTML5-specifik egenskab. Hvis du ikke vil bruge det, skal du bare bruge id i stedet, men husk, at id'er ikke kan starte med et tal - du bør foranstille det med et bogstav.

I PHP-scriptet brugte jeg mysqli i stedet for mysql_* funktioner. Du skal bruge mysqli eller PDO fra nu af, da de er mere pålidelige og sikre end den (nu forældede) mysql_* . Din PHP-installation indeholder højst sandsynligt allerede disse udvidelser. Bemærk, at jeg ikke håndterede databaseforespørgselsfejl. Du kan selv skrive den kode. Hvis du får andre former for fejl, så post dem her, så vil jeg prøve at rette dem.