Pulsante "more" in stile Twitter
Pagina 1 di 2
In questo articolo vi spiegherò come ricreare l'effetto del pulsante "More" di Twitter utilizzando la libreria jQuery.
Il pulsante che vogliamo ricreare, per chi non lo sapesse, permette di allungare la lista dei messaggi mostrati di default senza necessità di alcun refresh della pagina (cosa possibile grazie alla tecnologia Ajax sempre più utilizzata negli ambienti del Web 2.0).
Iniziamo con il creare un semplice database di prova costituito da un'unica tabella:
CREATE TABLE messaggi( msg_id INT PRIMARY KEY AUTO_INCREMENT, message TEXT );Come potete vedere la tabella appena costruita è composta da due soli campi:
- msg_id con cui identificheremo il messaggio;
- e message che contiene il testo;
Per mia comodità mi sono creato un file php (che userò in inclusione) in cui effettuo solo la connessione al database e l'ho chiamato "dbconfig.php":
<?php
$conn = mysql_connect("HOST", "USERNAME", "PASSWORD") or die(mysql_error());
mysql_select_db("NAME_DB", $conn) or die(mysql_error());
?>
Come detto il file "dbconfig.php" verrà incluso nei file che andremo a creare, in modo da non riscrivere lo stesso codice più volte.
Per eseguire l'effetto è necessario creare due file:
- il primo utilizzato per la visualizzazione dei primi "n" messaggi;
- ed un secondo a cui verranno fatte le richieste ajax (implementate con jQuery) per la visualizzazione dei "messaggi successivi".
<html>
<head>
<title>Pulsante More in stile Twitter</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.more').click(function() {
var element = $(this);
var msg = element.attr('id');
$('#morebutton').html('<img src="loading.gif" />');
$.ajax({
type: 'POST',
url: 'more_ajax.php',
data: 'lastmsg=' + msg,
cache: false,
success: function(html){
$('#morebutton').remove();
$('#more_updates').append(html);
}
});
return false;
});
});
</script>
</head>
<body>
<div align="center" style="width:500px;">
<?php
include('dbconfig.php');
$sql_check = mysql_query("SELECT * FROM more order by msg_id desc limit 2");
while($row = mysql_fetch_array($sql_check)) {
$msg_id = $row['msg_id'];
$msg = $row['message'];
?>
<div id="<?php echo $msg_id; ?>" class="boxMsg">
<span style="padding:5px;"><?php echo $msg; ?></span>
</div>
<?php
}
?>
<div id="more_updates"></div>
<div id="morebutton"><a id="<?php echo $msg_id; ?>" class="more" href="#" >More</a></div>
</div>
</body>
</html>
Come potete notare dopo la visualizzazione dei primi 2 messaggi (ordinati in base a "msg_id" in modo decrescente), vi è un div vuoto con id "more_update" (qui verranno "immagazzinati" i successivi messaggi) ed un successivo div che rappresenta il link "More" a cui associamo - tramite un metodo di jQuery - l'azione di richiesta altri messaggi.
Nell'intestazione (<head>...</head>) del documento, dopo aver richiamato la libreria jQuery, abbiamo descritto la funzione javascript associata al link "More" (tale funzione è richiamata con l'evento click).
Con questa funzione preleviamo dall'attributo "id" del link stesso l'identificativo ("msg_id") dell'ultimo messaggio visualizzato; tale identificativo viene inviato al secondo file php come parametro post della richiesta ajax; intanto sostituiamo il contenuto del div contenitore del link "More" con una bellissima gif animata con effetto "loading", giusto per ingannare l'attesa.
Se la richiesta ajax ha avuto esito positivo (proprietà success della richiesta) rimuoviamo tutto il div "morebutton" ed inseriamo l'HTML di risposta (contenente gli altri messaggi) nel div contenitore "more_update" utilizzando il metodo append.
 | Corso AJAX Applicazioni Web 2.0 basate su AJAX con ASP, ASP.NET e PHP. A partire da 49 €. |
 | Corso Javascript Guida completa allo scripting lato client. A partire da 39 €. |
 | Corso PHP Corso completo per la creazione di siti Web dinamici. A partire da 49 €. |
