jquery.bootstrap.confirm.popover.js

/*
Copyright (c) 2011 Damien Antipa, http://www.nethead.at/, http://damien.antipa.at

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/*
* jQuery Plugin: Confirmation Dialog
* 
* Requirements: jQuery 1.6.4, Bootstrap 2.x
* http://jquery.com/
* http://twitter.github.com/bootstrap/
* 
* This Plugin can be used for anchors, to show a confirmation popup before redirecting to the link.
* Original code by Damian Antipa <http://damien.antipa.at/2011/10/jquery-plugin-confirmation/>
*
* Changes by WalkingRiver to work with jQuery 1.9 and the removal of $elem.data('events'). 
*       - The code now uses $._data(this, 'events').
*       - All click handler(s) registered are maintained and executed on the non-Cancel button.
*       - Original jQuery event information is passed to the existing click handler(s).
*       - Changed popover position to coincide with the mouse click.
*       - Updated classes to work with Bootstrap 2.x.
*       - Defaults to "right" placement instead of "left."
*
* Example Usage:
*       $('a.delete')
*           .click(function (event) {
*               $(event.currentTarget).closest('tr').remove();
*           }).confirmDialog();
*/
(function ($) {
    $.fn.extend({
        confirmDialog: function (options) {
            var defaults = {
                message: '<strong>Are you sure?</strong>',
                dialog: '<div id="confirm-dialog" class="popover">' +
                            '<div class="arrow"></div>' +
                            '<div class="popover-inner">' +
                                '<div class="popover-content">' +
                                    '<p class="message"></p>' +
                                    '<p class="button-group"><a href="#" class="btn btn-small btn-danger"></a><a href="#" class="btn btn-small"></a></p>' +
                                '</div>' +
                            '</div>' +
                        '</div>',
                cancelButton: 'Cancel'
            };
            var options = $.extend(defaults, options);

            return this.each(function () {
                var o = options,
                    originalElement = this,
                    $elem = $(originalElement),
                //save any existing click handler
                    targetClickFun = [],
                    existingClickHandlers = $._data(this, 'events').click,
                    i;

                //is there an existing click handler registered
                if (existingClickHandlers) {
                    // Save existing click handler(s)
                    for (i = 0; i < existingClickHandlers.length; i++) {
                        targetClickFun.push(existingClickHandlers[i].handler);
                    }
                    //unbind it to prevent it firing
                    $elem.unbind('click');
                } else {
                    //assume there is a href attribute to redirect to
                    targetClickFun.push(function () { window.location.href = $elem.attr('href'); });
                }

                $elem.bind('click', function (originalEvent) {
                    originalEvent.preventDefault();
                    if (!$('#confirm-dialog').length) {

                        var $dialog = $(o.dialog).appendTo('body');

                        $dialog.find('p.button-group').css({
                            marginTop: '5px',
                            textAlign: 'right'
                        });

                        $dialog.find('a.btn').css({
                            marginLeft: '3px'
                        });

                        $dialog.find('p.message').html(o.message);

                        $dialog.find('a.btn:eq(0)').text($elem.text()).bind('click', function (e) {
                            $dialog.remove();
                            for (i = 0; i < targetClickFun.length; i++) {
                                targetClickFun[i](originalEvent);
                            }
                        });

                        $dialog.find('a.btn:eq(1)').text(o.cancelButton).bind('click', function (e) {
                            $dialog.remove();
                        });

                        $dialog.bind('mouseleave', function () {
                            $dialog.fadeOut('fast', function () {
                                $dialog.remove();
                            });
                        });

                        // Now that the pop-over is all set up properly, we can size it through CSS
                        var width = $dialog.width(),
                            height = $dialog.height(),
                            left = originalEvent.pageX,
                            top = originalEvent.pageY - $dialog.height() / 2,
                            right = left + $dialog.width();

                        // If there is room,  position the box to the right of the mouse.
                        if (right < document.width) {
                            $dialog.addClass('right');
                        } else {
                            //dialog has to be left
                            left -= width;
                            $dialog.addClass('left');
                        }

                        $dialog.css({
                            display: 'block',
                            position: 'absolute',
                            top: top,
                            left: left
                        });
                    }
                });
            });
        }
    });
})(jQuery);

We needed a simple confirmation dialog for a delete link. We found this, since we use Bootstrap, but it didn't work with jQuery 1.9 and Bootstrap 2.3.1. I forked it and updated it to work, and also made some other changes:

• The code now uses $._data(this, 'events').
• All click handler(s) registered are maintained and executed on the non-Cancel button.
• Original jQuery event information is passed to the existing click handler(s).
• Changed popover position to coincide with the mouse click.
• Updated classes to work with Bootstrap 2.x.
• Defaults to "right" placement instead of "left."

Example Usage:

  $('a.delete')
      .click(function (event) {
          $(event.currentTarget).closest('tr').remove();
      }).confirmDialog();