jQuery UI namespaceWidget

Question

I'm looking over the ui.dialog source code, which is probably the best learning experience ever.

I see they reference uiDialog a lot, and it seems clear that uiDialog reefers to the widget itself. So I tried this in my widget, as in namespaceWidgetName but it's undefined. Do I understand uiDialog correctly, and how do I reefer to my widget within the widget?

(function( $, undefined ) {

    $.widget("dbd.myWidgetName", {
        options: {
            //autoOpen: true,
        },
        _create: function() {
        },
        widget: function() {
             return this.dbdMyWidgetName;
        }
// rest of widget code

Answer 1

In the _create function of ui.dialog there is a line that reads:

uiDialog = (self.uiDialog = $('<div></div>'))

This is how the uiDialog property is initialized.

Depending on how your widget works, you might not need to provide a widget property/function. Many jQuery widgets do not. The dialog widget creates some DOM content that wraps the element you specify in $.dialog(), and its widget property/function enables you to access that DOM element.

If you want to provide a widget property to be consistent with dialog, you could simply use the underlying element of your widget like this:

$.widget("dbd.myWidgetName", {
    options: {
        //autoOpen: true,
    },
    _create: function() {
    },
    widget: function() {
         return this.element;
    }
}

All jQuery widgets have a property called element that refers to the underlying DOM element(s), wrapped in a jQuery instance. Take a look in a debugger to see how it works.