È sempre una pratica raccomandabile chiedere conferma all'utente prima di permettergli di compiere un'azione distruttiva sui dati. Con jQuery possiamo implementare un semplice sistema di conferma dell'azione utilizzando il metodo JavaScript confirm(). Questo metodo ha l'indubbio vantaggio di bloccare ogni azione della pagina in attesa di una risposta dell'utente. Vediamo insieme i dettagli.
Il metodo confirm()
Questo metodo accetta come parametro il testo da usare nella finestra di dialogo. La finestra di dialogo creata avrà due pulsanti: OK o Cancella/Annulla. A ciascuno di questi pulsanti viene assegnato un valore booleano, ossia true per OK e false per Cancella/Annulla. Quindi possiamo verificare se l'utente ha premuto uno dei due pulsanti in questo modo:
var decision = confirm('Sei sicuro?');
if(decision) {
// ha premuto OK
} else {
// ha premuto Cancella/Annulla
}
Esempio con jQuery
Avendo una serie di pannelli con un pulsante per la cancellazione, vogliamo chiedere conferma all'utente prima di eliminare un elemento. Ecco l'implementazione:
$(function() {
var button = $('<a/>', {'class': 'remove', href: '#', text: 'Rimuovi'});
button.appendTo('div.panel');
$('a.remove', 'div.panel').each(function() {
var $a = $(this);
$a.click(function(event) {
var permission = confirm('Sei sicuro di voler eliminare questo elemento?');
if(permission) {
$a.parent().animate({'opacity':'hide'}, 'slow', function() {
$a.parent().remove();
});
} else {
return;
}
event.preventDefault();
});
});
});
Se l'utente da il suo assenso, l'elemento viene rimosso, altrimenti la funzione associata all'evento click non esegue nessuna azione ma interrompe la sua esecuzione con un'istruzione return.
Potete visionare l'esempio finale in questa pagina.