Ciao a tutti,
ho creato un effetto di scroll infinito ma ho un piccolo problema..
praticamente ogni volta che raggiungo il bottom della pagina con lo scroll faccio una chiamata ajax ad una query php che mi restituisce altri 10 record dalla tabella in questione..aggiungendoli alla lista della mia pagina..
sembra funzionare correttamente se non fosse che una volta caricata la pagina completamente refreshandola avvengono mille chiamate e alla query non viene passata più la variabile dell'id da incrementare di 10..
quindi una volta passa un valore e la volta dopo invece di passargliene uno decrementato di 10 gli passa lo stesso o addirittura uno più alto..
lo stesso avviene se scrollo troppo velocemente senza aspettare che carichi i 10 record per volta.
qua il codice
codice:
$(document).ready(function () {
var nr = "<?php echo $lastPastId ?>";
loadData( nr );
//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() );
});
};
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
$('div.ajaxloader').show('slow');
loadData( $("#entries .singleRecord:last").attr('id') );
//alert( $("#entries .singleRecord:last").attr('id') );
}
});
nr è la variabile iniziale dato che appena carica la pagina gli dico qual'è l'id più alto dei record della tabella..
Con la funzione di scroll determino l'id dell'ultimo div con classe singleRecord e lo passo alla funzione loadData che a sua volta lo passa alla query php in getentries.php che ha il compito di estrarre i 10 record successivi all'id passato last_id...
Codice PHP:
<?php
//Connect to Database
$con = new mysqli( 'localhost', 'root', 'root', 'dbname' );
if( $con->connect_errno ) {
die( 'Could not connect:' . $con->connect_error );
}
$id = isset( $_GET['lastPastId'] );
$last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : $id;
echo $last_id;
$stmt = $con->prepare( 'SELECT id,nome FROM table WHERE id < (?) ORDER BY id DESC LIMIT 0, 10' );
$stmt->bind_param( 'i', $last_id );
$stmt->execute();
$stmt->bind_result($id, $nome);
while($stmt->fetch()) {
?>
<div id="<?php print "$id" ?>" class="singleRecord"><?php print $nome; ?></div>
<?php
}
$con->close();
?>
ovviamente nella mia pagina ho i due div.. entries che accoglie i record e ajaxloader che viene visualizzato e nascosto in base alle funzioni
codice:
<div id="entries">
<div class="ajaxloader">[img]../img/ajax-loader.gif[/img]</div>
</div>
ho pensato che la soluzione sia nel fermare la funzione scroll fino al momento in cui non vengano restituiti i 10 record..
ma come fare?
Grazie per l'aiuto!