Pagina con scrolling senza fine con AJAX

Oggi vi mostrerò come poter ottenere una pagina senza fine, si aggiornerà ogni volta che si scrolla a fine pagina.

  • JQuery
  • Script JS nel file HTML
  • file PHP

I passi da eseguire sono semplici. Nel file HTML bisogna inserire uno script JS che effettua un controllo basato se l’utente è a fine pagina, se si arriva a fine pagine richiama una pagina PHP che provvederà ad aggiornare la pagina HTML, senza ricaricarla da zero.

Prima di tutto, bisogna inglobare il file JQuery nel file HTML in cui si vuole ottenere l’effetto pagina-senza-fine.

<script type="text/javascript" src="js/jquery.min.js"></script>

Mentre bisogna inserire il seguente tag DIV nella pagina HTML dove si vuol mostrare il loader che verrà richiamato dallo script JS.

<div id=”lastPostsLoader”></div>

Copiare ed incollare lo script JS sottostante nella pagina HTML

<script type=”text/javascript”>

$(document).ready(function(){

function lastAdded()
{

/* lastPostsLoader è un DIV che indica qual’è l’ultimo ID mostrato*/

/* Sostituire l’url di IMG con un loader */
$(‘div#lastPostsLoader’).html(‘<img src=”/images/ajax-loader.gif”>’);

/*  home-ajax.php è il file chiamato quando si arriva a fine pagina passando il parametro ‘id recuperato tramite l’ultimo wrdLatest‘ */
$.post(“home-ajax.php?id=”+$(“.wrdLatest:last”).attr(“id”),

function(data){
if (data != “”) {
$(“.wrdLatest:last”).after(data);
}
$(‘div#lastPostsLoader’).empty();
});
};

/* funzione di controllo  che effettua la chiamata alla funziona lastAdded() che a sua volta chiama il file home-ajax.php */

$(window).scroll(function(){
if  ( $(window).scrollTop() >= $(document).height() – $(window).height() ) {
lastAdded();
}
});

});
</script>

Mentre nel file home-ajax.php si può avere un file simile a questo:

//codice…

//recuperiamo l’ultimo id e stampiamo una nuova riga con un id incrementato di una unità (id+1)

// l’id viene assegnato alla classe wrdLatest del tag TR

$id = $_GET[‘id’]+1;

echo “<tr class=\”wrdLatest\” id=\””.$id.”\”>”;

echo “<td>”;

echo $id;

echo “</td>”;

echo “</tr>”;

In questo modo otteniamo una nuova riga ogni volta che si arriva a fine pagina avente un id sempre maggiore.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...