3/4/2016 - 10:42 PM

Generic delete confirmation (jQuery and bootstrap 3.x)

Generic delete confirmation (jQuery and bootstrap 3.x)

// Example callback function
function removeAttachment(link) {
    // Do however you want to handle deleting 
    // We have the link element and can access it's data attributes
    // For example:

$(document).ready(function() {
    // Now, when the button is clicked, setup the message, attach event with button 
    // and then show the modal
    $(document).on('click', 'a.remove', function(e) {
        var link = this;
        $('#delete-confirmation-yes').on('click', function() {
            var callback = $(link).data('callback');


    // While the modal is hiding, nedd to clear message and event
    $('#delete-confirmation').on('', function (e) {
We need a generic Modal to ask for confirmation. 
Please note that:
    - we have a placeholder (#delete-confirmation-msg) for displaying delete message
    - Confirm positive button is #delete-confirmation-yes
<div class="modal fade" id="delete-confirmation">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p id="delete-confirmation-msg"></p>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="delete-confirmation-yes">Remove</button>
The delete links should have a common class (.remove here) and the following data attributes:
    * data-url      - The link to remove target resource
    * data-message  - The message to show on confirmation modal
    * data-callback - The name of callback function that will be called if confirmation is positive
                      This funciton will receive the delete link element as argument                       
<ul class="list-unstyled fileList">
    <li class="font-blue-steel" id="attachment-234">
        <a href="#" class="remove attachment" title="Remove this file"
                data-message="Are you sure to delete this <b>InterestingThing<b/>?">
            <span class="glyphicon glyphicon-remove"></span> Delete
    <!-- More list items... -->