tommyc81's avatar

Generic and easy to use Bootstrap modal POST confirmation

Currently using GET methods for deleting content. Accidental deletion is "protected" by the use of some javascript and a confirmation modal. However, given that it's generally poor design to use GET for deleting content (potential browser pre-fetching issues etc.), I'd like to convert this to the delete buttons that POSTs a delete request instead via a form (incl. token).

However, I'm a bit of a newbie when it comes to setting this up correctly and would appreciate hints for a possible library that makes this dirt simple. For comparison, this is what I'm using now:

Part of my app.js:

$(document).ready(function () {
    $('a[data-confirm]').click(function (ev) {
        var href = $(this).attr('href');
        if (!$('#dataConfirmModal').length) {
            $('body').append(
                '<div class="row">' +
                '<div class="modal" id="dataConfirmModal" tabindex="-1" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">' +
                '<div class="modal-dialog">' +
                '<div class="modal-content">' +
                '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 class="modal-title" id="dataConfirmLabel">Please Confirm</h3></div>' +
                '<div class="modal-body"></div>' +
                '<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">Confirm</a></div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>'
            );
        }
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal('show');
        return false;
    });
});

And how I trigger it in the views:

<a href="{{ URL::route('documentSet-remove-document', [$documentSet->id, $document->id]) }}" data-confirm="Confirm you want to remove the Document from the DocumentSet?" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Document</a>

Something equally simple but more robust (POST instead of just GETting a URL) is what I'm looking for. Suggestion?

0 likes
1 reply
ahuggins's avatar

You could do an AJAX Post request on the click of your link (or the confirm of the modal). Assuming you set up route in a Resourceful Routing convention, you would send a DELETE request to /documentSet/{$id}. But I think you would probably have to change how you have your routes setup.

In order to send a DELETE request you would want to be sure to send a variable with name="_method" and value="DELETE". You probably will also need to set up the CSRF token.

Please or to participate in this conversation.