Question

Am trying to implement a confirm dialog with fancy box. My javascript code is arranged into modules.

I’ve set up the confirm dialog function inside a module called “Utility”

var Utility = (function() {
    function confirm_dialog(title,msg,callback)
        {
            var html = '<div class="confirm-box">'+
                       '<div class="confirm-title">'+title+'</div>'+
                       '<div class="confirm-msg">'+msg+'</div>'+
                       '<div class="confirm-buttons">'+
                       '<button class="okBtn">Ok</button>'+
                       '<button class="cancelBtn">Cancel</button>'+
                       '</div>'+
                       '</div>';
            var ret;
            $.fancybox('<div class="confirm-dialog"></div>',
            {
                'width':400,
                'height':250,
                'content':html,
                'modal' : true,
                'transitionIn' : 'none',
                'transitionOut': 'none',
                'speedIn' : 300,
                'speedOut' : 300,
                'autoScale' : false,
                'scrolling' : 'no',
                'overlayShow' : true,
                'overlayOpacity' : 0.3,
                'overlayColor' : '#666',
                'padding':10,
                'onComplete':function() {
                    $('.okBtn').click(function(){
                            ret = true;
                            $.fancybox.close();
                        })
                    $('.cancelBtn').click(function() {
                        ret = false;
                        $.fancybox.close();
                    })
                },
                onClosed : function() {
                     if (typeof callback == 'function'){ callback.call(this, ret); } }
            });
        }
        return { dialog : confirm_dialog }
})();

This is event handler that triggers the dialog

$('a.deletePheed').click(function(e) {
                            var id = $(this).parent('div.pheed-holder').attr('data-id');
                        Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?',
                        PheedModule.delete_pheed());
                            e.preventDefault();
                        });

Once the event handler is clicked the callback is immediately fired before the dialog is even displayed,and those not execute when ok is click in the confirm dialog.
What i am not doing correctly?

Answer 1

I’m not familiar with everything that you’re using, but you probably need to wrap the call to PheedModule.delete_pheed() in an anonymous function:

Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?', function() {
    PheedModule.delete_pheed();
});