How can I move creation of a dialog into an external function in jQuery UI?

Question

I have the following code:

$('#commonDialog').dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            draggable: true,
            height: 'auto',
            width: 875,
            buttons: {
                "Submit": function () {
                    tinyMCE.triggerSave();
                    $("#update-message").html('');
                    $("#menuForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                tinyMCE.init(window.tinyMCEOptions);
                $('.ui-dialog-buttonpane').
                    find('button:contains("Submit")').button({ icons: { primary: 'ui-icon-plus'} });
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel'} });
                $(":input[type='checkbox']").wijcheckbox();
                $("#dialog_type").wijdropdown();
                $("#dialog_select").wijdropdown();
                $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            }
        });

Now the code is on my web page but I want to use the same code for another page. How can I move all of this code into another function so I can place it in an external file and share it?

Ideally what I would like to do is just have the following on each page:

$('#commonDialog').createCommonDialog()

Answer 1

Just move it into a function. If there's anything you want varied, make that a parameter to the function. (For instance, you might make tinyMCE a parameter, so it doesn't have to be a global shared by your separate file and your pages. Or not, if it's always going to be there anyway.)

If you really want your syntax at the end, you can add to $.fn , which is what plug-ins do. So:

(function($) {
    $.fn.createCommonDialog = function() {
        // your code here, `this` will be a jQuery instance around
        // whatever the current matched set of elements is.
        // (Note that that's different from `this` in event handlers,
        // which is a raw DOM element.)

        // Unless you have a really good reason not to, return `this`
        // at the end, so your function can be part of a chain
        return this;
    };
})(jQuery);

Or if like me you prefer that your functions have names :

(function($) {
    $.fn.createCommonDialog = createCommonDialog;
    function createCommonDialog() {
        // ...

        return this;
    }
})(jQuery);

Eg:

(function($) {
    $.fn.createCommonDialog = createCommonDialog;
    function createCommonDialog() {
        this.dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            draggable: true,
            height: 'auto',
            width: 875,
            buttons: {
                "Submit": function () {
                    tinyMCE.triggerSave();
                    $("#update-message").html('');
                    $("#menuForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                tinyMCE.init(window.tinyMCEOptions);
                $('.ui-dialog-buttonpane').
                    find('button:contains("Submit")').button({ icons: { primary: 'ui-icon-plus'} });
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel'} });
                $(":input[type='checkbox']").wijcheckbox();
                $("#dialog_type").wijdropdown();
                $("#dialog_select").wijdropdown();
                $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            }
        });

        return this;
    }
})(jQuery);

Live example