Bootstrap confirm delete modal dialog jquery plugin

You can install with bower or npm.

$ bower install bootstrap-confirm-delete
$ npm install --save bootstrap-confirm-delete

This plugin depends on the following:

• jquery >= 1.9.1
• bootstrap >= 3.3.5

NOTE: This plugin has not been tested with versions prior to these.

This plugin will intercept the delete event on configured page elements. In this example it will block the deletion click on any links or buttons that have the 'delete' class on them.

<script src="jquery.js"></script>
<script src="bootstrap-confirm-delete.js"></script>

<a href="server.php" class="delete" data-type="post">Delete</a>

Initialise the plugin either in <script></script> tags on the html page or in an external .js script.

$( document ).ready( function( )
{
    $( '.delete' ).bootstrap_confirm_delete( );
} );

Notice the 'data-type' attribute on the link. The plugin will use this attribute if set to show a custom delete message. For example,

Heading: 'Delete Post'

Message: 'Are you sure you want to delete this post?'

This example shows all the available options:

$( document ).ready( function( )
{
    $( '.delete' ).bootstrap_confirm_delete(
        {
            debug:              false,
            heading:            'My Custom Delete Heading',
            message:            'Are you sure you want to delete this item?',
            btn_ok_label:       'Yes',
            btn_cancel_label:   'Cancel',
            data_type:          'post',
            callback:           function ( event )
                                {
                                    // grab original clicked delete button
                                    var button = event.data.originalObject;
                                    // execute delete operation
                                    button.closest( 'tr' ).remove();
                                },
            delete_callback:    function() { console.log( 'delete button clicked' ); },
            cancel_callback:    function() { console.log( 'cancel button clicked' ); }
        }
    );
} );

Bootstrap Confirm Delete plugin comes with several optional settings.

Debug mode will output events and information to the console.

This is for setting a custom modal heading.

Setting a custom delete message/question.

Set the confirm label text

Set the cancel label text

Used if heading & message are not provided

Will fire if responding to a button click that has no href attribute.

Use this callback to do any deletions from a button click. Parameters:

• data (data.originalObject contains the originally clicked object)

Will fire when the delete button is clicked and a handler is provided. Parameters:

• data (data.originalObject contains the originally clicked object)

Will fire when the cancel button is clicked and a handler is provided. Parameters:

• data (data.originalObject contains the originally clicked object)

Copyright © 2015 Tom Kaczocha [email protected] Licensed under the MIT license.

Special thanks to:

• mpecan