Das ist eine ziemlich komplexe Frage. Bevor Sie versuchen, Ihre eigene Variante von Grund auf neu zu codieren, schlage ich vor, dass Sie sich das Infinite Scroll jQuery Plugin . Wenn das nicht hilft, hier ist eine mögliche Lösung:
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();
Der Javascript-Code sendet eine AJAX GET-Anforderung an das PHP-Skript mit der ID des letzten in der Liste angezeigten Eintrags. Das PHP-Skript gibt dann 30 Einträge zurück, die nach dieser ID kommen. Die ursprüngliche Javascript-Datei enthielt ein wenig PHP-Code. Ich habe das entfernt, da ich nicht weiß, wozu es dient (geben Sie das JS vielleicht aus einem PHP-Skript aus?). Auch die ganze XMLHttpRequest Code kann zu $.get() abgekürzt werden Funktion. Sie verwenden sowieso jQuery, sodass Sie das Rad nicht neu erfinden müssen. Ich habe die data-id verwendet Attribut zur Übermittlung der Eintrags-IDs. Das ist ein HTML5-spezifisches Attribut. Wenn Sie es nicht verwenden möchten, verwenden Sie einfach id Denken Sie jedoch daran, dass IDs nicht mit einer Zahl beginnen können - Sie sollten ihr einen Buchstaben voranstellen.
Im PHP-Skript habe ich mysqli verwendet anstelle von mysql_* Funktionen. Sie sollten mysqli verwenden oder PDO von nun an, da sie zuverlässiger und sicherer sind als das (inzwischen veraltete) mysql_* . Ihre PHP-Installation enthält diese Erweiterungen höchstwahrscheinlich bereits. Beachten Sie, dass ich keine Datenbankabfragefehler behandelt habe. Sie können diesen Code selbst schreiben. Wenn Sie andere Arten von Fehlern erhalten, posten Sie sie hier und ich werde versuchen, sie zu beheben.
