How to create jQuery dialog without widget factory?

Question

I am creating a jQuery dialog with the widget factory mechanism.

function ($) {

    function myDialogDiv() {...} // create all required HTML for the dialog

    $.widget("myApp.myDialog", {

        _create:function() {
            var div = myDialogDiv();
            var props = {autoOpen:false, height:'200', width:'30%'};
            var onClose = function () {};
            $(div).dialog(props, onClose);
        },

        _init:function() {$('#myDialog').dialog('open');}
    })

}(jQuery))

...

// open the dialog on button click
$('.myDialogButton').bind("click", function(){$(this).myDialog();});

It works Ok. Now I wonder if I can create a jQuery dialog without the widget factory.

machineghost · Accepted Answer · 2012-07-22 18:16:57Z

Sure, you can write your own dialog library or use another one that has it's own initialization scheme ;-)

Failing that though, no. jQuery Dialogs (just like all jQuery UI widgets) require a certain set of initialization parameters, and you can either reproduce them every time you want the widget, or you can use the "widget factory" style to hide all that initialization stuff inside a builder function.

Also, you have to keep in mind that jQuery UI, just like jQuery, does not try to do everything for you: they deliberately leave lots of stuff to the developer, eg. connecting the button to the generation of the dialog. This makes sense when you think about it, because someone else might use an A tag, someone else a DIV, etc. The goal of the library is just to save you from having to redo the common stuff, not to save you from writing any code at all on your end.

The only other option that I can see is a sort of half and half approach, where you re-make your dialog every time, but use a global set of options to save repetition:

var GLOBAL_DIALOG_PROPS = {autoOpen:false, height:'200', width:'30%'}
function dialogButtonClickHandler() {
    $(this).myDialog().dialog(GLOBAL_DIALOG_PROPS, onClose).dialog('open');
}
$('.myDialogButton').bind("click", dialogButtonClickHandler);

But at the end of the day that initialization stuff has to be done, and if you're going to do it multiple places in the code the smart thing is to DRY it out and store the common bits somewhere (like in your widget factory).

Collectives™ on Stack Overflow

How to create jQuery dialog without widget factory?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related