Notifiche con jQuery e PHP

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

info

1 2 3

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

info

1	<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:

info

1 2 3 4 5 6 7

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:

info

1 2 3 4 5 6 7 8

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