Esta es una pregunta bastante compleja. Antes de intentar codificar su propia variación desde cero, le sugiero que eche un vistazo al Infinite Scroll jQuery Plugin . Si eso no lo soluciona, aquí hay una posible solución:
$(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
//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();
El código Javascript envía una solicitud AJAX GET al script php con la identificación de la última entrada que se muestra en la lista. El script PHP luego devuelve 30 entradas que vienen después de esa identificación. El archivo Javascript original tenía un poco de código PHP. Lo eliminé, ya que no sé cuál es su propósito (¿quizás estás generando el JS desde un script PHP?). Además, todo el XMLHttpRequest
el código se puede acortar a $.get()
función. Estás usando jQuery de todos modos, así que no necesitas reinventar la rueda. Usé el data-id
atributo para transmitir los identificadores de entrada. Ese es un atributo específico de HTML5. Si no desea usarlo, simplemente use id
en su lugar, pero recuerde que las identificaciones no pueden comenzar con un número; debe anteponer una letra.
En el script PHP, usé mysqli
en lugar de mysql_*
funciones Deberías usar mysqli
o PDO
de ahora en adelante, ya que son más confiables y seguros que el (ahora en desuso) mysql_*
. Lo más probable es que su instalación de PHP ya incluya estas extensiones. Tenga en cuenta que no manejé los errores de consulta de la base de datos. Puedes escribir ese código tú mismo. Si obtiene otros tipos de errores, publíquelos aquí e intentaré solucionarlos.