Eliminare correttamente un elemento di una lista con un metodo e jQuery

Vediamo insieme come gestire al meglio, tramite Laravel e jQuery, la cancellazione di un elemento usando un pulsante e l'attributo data-delete.
francesco
Luigi Migliardi
08/10/2014 in Tips

Quante volte ti sei trovato davanti alla creazione di un bottone che al click dovesse eliminare quel determinato id, in quella determinata tabella?

Sicuramente più di una volta. Sicuramente ti sarai chiesto: "come posso fare per far comparire un popup per avere la conferma che l'utente voglia realmente eliminare quel determinato elemento?"

Bene! Oggi ti voglio spiegare come fare.

// Generare un token CSRF e metterlo all'interno di un attributo data-delete personalizzato
public function buttonDelete()
{
    $format = '<a href="%s" data-toggle="tooltip" data-delete="%s" title="%s" class="btn btn-default"><i class="fa fa-trash-o"></i></i></a>';
    $link = URL::route('accounts.groups.delete', ['id' => $this->resource->id]);
    $token = csrf_token();
    $title = "Delete the group";
    return sprintf($format, $link, $token, $title);
}

// Funzione jQuery che intercetta gli eventi click su elementi aventi un attributo data-delete
$('[data-delete]').click(function(e){
    e.preventDefault();
    // Se l'utente conferma l'eliminazione
    if (confirm('Do you really want to delete the element ?')) {
        // URL route
        var url = $(this).prop('href');
        // Token
        var token = $(this).data('delete');
        // Creo un elemento form
        var $form = $('<form/>', {action: url, method: 'post'});
        // Aggiungo un input con type="hidden" e value="delete"
        var $inputMethod = $('<input/>', {type: 'hidden', name: '_method', value: 'delete'});
        // Aggiungo il token all'input
        var $inputToken = $('<input/>', {type: 'hidden', name: '_token', value: token});
        // Aggiungo gli input al form, lo nascondo, lo aggiungo al <body>, INVIO!
        $form.append($inputMethod, $inputToken).hide().appendTo('body').submit();
    }
});

Ti è servito? Usi un metodo che secondo te è migliore?

Dicci la tua!