What's the best practice to add default function to jQuery Dialog open/close events?

Question

Hi All, I'm trying to define some default behaviours for my jQuery Dialogs like the following:

(function($) {
        /**
         * Overriding default options
         **/
        $.ui.dialog.defaults.bgiframe = true;
        $.ui.dialog.defaults.open = function() {
            if ($('.ui-widget-overlay').length == 0) return;
            if ($.browser.msie) {
                // scrollbar fix for IE
                $('html').css('overflow-y','hidden');
                $('html').css('overflow-x','hidden');
            } else {
                // disable scrollbar for other browsers
                $('body').css('overflow','hidden');
            }
        };
        $.ui.dialog.defaults.beforeclose = function(event, ui) {
            if ($('.ui-widget-overlay').length == 0) return;
            if ($.browser.msie) {
                // scrollbar fix for IE
                $('html').css('overflow-y','auto');
                $('html').css('overflow-x','auto');
            } else {
                // disable scrollbar for other browsers
                $('body').css('overflow','auto');
            }
        };
})(jQuery);

The above works when I have no custom open/beforeclose function specified when the dialog is created. So I'm wondering what is the best practice to add these functionality into all my dialogs, while preserving the ability to specify open/beforeclose functions.

Answer 1

You're overriding defaults here. More likely than not, you don't want to be doing that. You're reaching in and tinkering with how the plugin itself was written, essentially. The way that you should be attaching these kinds of behaviors is by passing it into the config when you initialize your jQueryUI dialog:

$('some selector').dialog({
    bgiframe: true,
    open: function() { /* your code */ },
    beforeclose: function(event, ui) { /* your code */ }
});

Even more correctly, what you should be doing to conform to what the API specifies is initializing the dialog as normal, and then subsequently binding to its events:

var $dialog = $('some selector');
$dialog.dialog({ /* your config */ });
$dialog.bind('dialogopen', function() { /* your code */ });
$dialog.bind('dialogbeforeclose', function(event, ui) { /* your code */ });

It seems like a deeper problem is that you're not used to jQuery just yet. I think if you spend a little time reading some established jQuery code on GitHub, you'll get the hang of it pretty quickly.

Also, as a side note, I would be cautious about applying CSS properties directly to body and html on dialog load; if these things aren't things that can go in your CSS to begin with, they're not going to be any safer to do when someone interacts with the application. Try to select something more specific, or simply apply these things with conditional CSS.

Answer 2

Okay, I think I figured this out. Following is the least intrusive way of extending jQuery UI functions by attaching the events in _init function.

(function($) {
        /**
         * Overriding default options
         **/
        $.ui.dialog.defaults.bgiframe = true;

        var _init = $.ui.dialog.prototype._init;
        $.ui.dialog.prototype._init = function() {
            _init.apply(this, arguments);
            // only applying these function for modal dialog
            if (this.options.modal) {
                this.uiDialog.bind('dialogopen.ui-dialog', function() {
                    if ($.browser.msie) {
                        // scrollbar fix for IE
                        $('html').css('overflow-y','hidden');
                        $('html').css('overflow-x','hidden');
                    } else {
                        // disable scrollbar for other browsers
                        $('body').css('overflow','hidden');
                    }
                }).bind('dialogbeforeclose.ui-dialog', function() {
                    if ($.browser.msie) {
                        // scrollbar fix for IE
                        $('html').css('overflow-y','auto');
                        $('html').css('overflow-x','auto');
                    } else {
                        // disable scrollbar for other browsers
                        $('body').css('overflow','auto');
                    }
                });
            }
        }
})(jQuery);