Pulsante "more" in stile Twitter

Home + Ajax + Articoli Ajax + Pulsante "more" in stile Twitter

Articolo scritto da Maico Orazio il 18/11/2009
Visita anche www.mainickweb.com

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;

Ho volutamente ridotto "all'osso" il database d'esempio, ma ovviamente potete arricchirlo sulla base delle vostre effettive esigenze di sviluppo.

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".

Ecco il codice del primo file php (che possiamo salvare come "esempio.php"):

<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.

<<12 >>

Stampa Versione di Stampa

Segnala ad un Amico!

Aggiungi ai Preferiti! Aggiungi ai Preferiti

RSS

Ultimi articoli Ajax

Pulsante "more" in stile Twitter...

Eliminare elementi da una lista con...

Select dinamiche con JQuery e PHP

Popolare dinamicamente una combo co...

Una semplice chat con Ajax e PHP

Votazione con ASP ed AJAX

Pagine ad alta leggibilità con AJAX

Select dinamiche di regioni e provi...

Una galleria d'immagini dinamica co...

Un orologio scorrevole con ASP e AJ...

Corsi online ed Ebook

	ASP da Zero (Ebook) Imparare Microsoft ASP e VBScript da zero. A soli 29 €.
	Javascript (Corso) Guida completa allo scripting lato client. A partire da 39 €.
	PHP (Corso) Corso completo per la creazione di siti Web dinamici. A partire da 49 €.

A cura di MRW Corsi