Corsi on-line

Notifiche con jQuery e PHP

Programmando un applicativo in PHP per un cliente ho avuto la necessità di creare un piccolo sistema di gestione delle notifiche che, seppur semplicissimo, ritengo piuttosto elegante e meritevole di essere condiviso con voi.
In particolare la mia esigenza consisteva nel mostrare il risultato di alcune operazioni – come, ad esempio, la modifica di un record o la sua cancellazione – producendo un messaggio di conferma (in caso di operazione riuscita) o un messaggio di errore (in caso di fallimento)..

Per rima cosa ho aggiunto un paio di nuove classi (“conferma” e “errore”) al foglio di stile:

.conferma, .errore { padding: 3px 5px; margin-bottom: 10px; font-weight: bold; color: #FFFFFF; }
.conferma { background-color: #007000; }
.errore { background-color: #CC1100; }

Dopodichè ho aggiunto un semplice DIV nel codice HTML della pagina nel punto in cui volevo far apparire le notifiche:

<div id="notifiche"></div>

Fatto questo ho creato una semplicissima funzione PHP il cui scopo è creare un piccolo javascript che produce la notifica sfruttando la potenza della libreria jQuery (opportunamente inclusa nella pagina web) per creare un effetto fadeIn ed un successivo fadeOut temporizzato:

function notifica_jquery($class,$text)
{
  echo "<script type=\"text/javascript\">
  $('#notifiche').attr('class','" . $class . "').hide().html('" . $text . "').fadeIn('slow');
  setTimeout(function(){ $('#notifiche').fadeOut('slow'); }, 3000);
  </script>";
}

Questa funzione viene poi utilizzata all’interno del codice di controllo dell’applicazione in questo modo:

// se c'è un errore mostro la notifica di fallimento dell'operazione
if ($errore) {
  notifica_jquery('errore','Si è verificato un errore...');
}
// in caso contrario mostro una conferma di operazione riuscita
else {
  notifica_jquery('conferma','Tutto ha funzionato bene!!!');
}

come potete notare non faccio altro che passare, come primo parametro, la classe definita nei CSS e, come secondo parametro, un semplice testo da stampare a video.
Affinchè la notifica funzioni correttamente è necessario che lo script venga inserito nell’output della pagina dopo il DIV con ID “notifiche”. In caso contrario si otterrà un avviso di errore javascript da parte del browser.

Post correlati
  • Angelo

    Salve ragazzi, ma mi sapete dire quale è la libreria jquery da inserire???

  • Totò

    nella console degli errori di firefox:

    ERRORE: $(“#notifiche”) is nulll

I più letti del mese
Tematiche