Essa é uma pergunta bastante complexa. Antes de tentar codificar sua própria variação do zero, sugiro que você dê uma olhada no Infinite Scroll jQuery Plugin . Se isso não resolver, aqui está uma possível solução:
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();
O código Javascript envia uma solicitação GET AJAX para o script php com o id da última entrada exibida na lista. O script PHP então retorna 30 entradas que vêm depois desse id. O arquivo Javascript original tinha um pouco de código PHP nele. Eu removi isso, pois não sei qual é o seu propósito (você está produzindo o JS de um script PHP, talvez?). Além disso, todo o
XMLHttpRequest
o código pode ser encurtado para $.get()
função. Você está usando jQuery de qualquer maneira, então não precisa reinventar a roda. Eu usei o data-id
atributo para transmitir os IDs de entrada. Esse é um atributo específico do HTML5. Se você não quiser usá-lo, basta usar id
em vez disso, mas lembre-se de que os ids não podem começar com um número - você deve prefixá-lo com uma letra. No script PHP, usei
mysqli
em vez do mysql_*
funções. Você deve usar mysqli
ou PDO
a partir de agora, pois são mais confiáveis e seguros do que o (agora obsoleto) mysql_*
. Sua instalação do PHP provavelmente já inclui essas extensões. Observe que eu não lidei com erros de consulta de banco de dados. Você mesmo pode escrever esse código. Se você receber outros tipos de erros, poste-os aqui e tentarei corrigi-los.